<template>
  <div id="wghlarge">
    <div id="xkBanner">
      <img src="/static/imgs/banner.png" alt="">
      <div class="h1">徐霞客镇综合管理服务执法平台 — <span>网格化管理</span></div>
    </div>
    <div id="wghmap" ref="wghmap" v-loading="activityLoading">
      <div id="wghMap"></div>
      <div class="map-menu-options" v-show="!showMenuDetails && !wglms[1].active">
        <div class="item" v-for="(item, index) in mapMenuOptions" :key="index"
          :class="item.alias + (item.active ? ' active': '')"
          @click="handleMapOptions(index)">
          <div class="name">{{item.name}}</div>
        </div>
      </div>
      <div class="map-menu-details" v-if="showMenuDetails && !wglms[1].active">
        <!-- @click="handleMapOptions(showMenuDetails - 1)" -->
        <div class="optionItem active " :class="mapMenuOptions[showMenuDetails - 1].alias">
          <div class="name">{{mapMenuOptions[showMenuDetails - 1].name}}</div>
        </div>
        <div class="mp-body">
          <div v-for="(item, index) in mapMenuOptions[showMenuDetails - 1].childs" :key="index">
            <div v-show="!item.especialControl || !wglms[2].active">
              <div @click="handleActivityItemClicked(item, $event)" class="item" :class="{active: item.active, curpointer: !item.child || item.afterClick}">
                <img :src="'/static/imgs/map/' + item.id + '.png'" alt="">
                {{item.name}}
                <span class="count" v-show="!item.hideCount">({{item.count}})</span>
              </div>
              <div v-if="item.child" class="animated" style="margin-left: 30px;">
                <template v-for="(it, id) in item.child" >
                  <div class="item" :key="id" :class="{active: it.active, curpointer: !it.child}" @click="handleActivityItemClicked(it, $event)">
                    <img :src="'/static/imgs/map/' + it.id + '.png'" alt="" style="width:26px;height: 26px;">
                    <!-- • -->
                    {{it.name}}
                    <span class="count">({{it.count}})</span>
                  </div>
                  <div v-if="it.child" :key="'_' + id" class="animated" style="margin-left: 40px;">
                    <div class="item curpointer" v-for="(leaf, leafid) in it.child"  :key="leafid" :class="{active: leaf.active}" @click="handleActivityItemClicked(leaf, $event)">
                      <img :src="'/static/imgs/map/' + leaf.id + '.png'" alt="" style="width:26px;height: 26px;">
                      {{leaf.name}}
                      <span class="count">({{leaf.count}})</span>
                    </div>
                  </div>
                </template>
                
              </div>
            </div>
          </div>
        </div>
        <div class="clsBtn" @click="showMenuDetails = 0;"></div>
      </div>
      <div class="local-zb">
        <ul>
          <li v-for="(item, index) in wgTree" :key="index" @click="handeleWgTreeClick(item, index)" class="curpointer">{{item.name}}</li>
        </ul>
      </div>
      <!-- <el-carousel class="infos-right" arrow="hover" :autoplay="false" style="display:none;">
        <el-carousel-item>
          <div class="infos-item" style="height: 320px;">
            <div class="itemtitle curpointer">一长五员</div>
            <div class="itemcanvs yzwy">
              <div class="item curpointer" @click="openInfoFrame('yzwy', '网格长')"><div class="name">网格长</div><div class="num">{{girdInfo.yzwy.网格长}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '网格员')"><div class="name">网格员</div><div class="num">{{girdInfo.yzwy.网格员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '信息员')"><div class="name">信息员</div><div class="num">{{girdInfo.yzwy.信息员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '巡查员')"><div class="name">巡查员</div><div class="num">{{girdInfo.yzwy.巡查员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '联络员')"><div class="name">联络员</div><div class="num">{{girdInfo.yzwy.联络员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '信息员')"><div class="name">信息员</div><div class="num">{{girdInfo.yzwy.信息员}}</div></div>
            </div>
          </div>
          <div class="infos-item" style="height: 275px;">
            <div class="itemtitle">人口信息</div>
            <div class="itemcanvs rkxx">
              <div class="summary-infos">
                <div class="item curpointer" @click="openInfoFrame('person', '户数')">
                  <img src="/static/imgs/wgh/26.png" alt="">
                  <div class="inf"><p class="num">{{girdInfo.person.户数}}户</p><p>总户数</p></div>
                </div>
                <div class="item curpointer" @click="openInfoFrame('person', '人口数')">
                  <img src="/static/imgs/wgh/27.png" alt="">
                  <div class="inf"><p class="num">{{girdInfo.person.人口数}}人</p><p>人口数</p></div>
                </div>
              </div>
              <div class="list-infos">
                <div class="item curpointer" @click="openInfoFrame('person', '低保户')"><div class="name">低保户</div><div class="extra">{{girdInfo.person.低保户}}户</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '重点人员')"><div class="name">重点帮扶人员</div><div class="extra">{{girdInfo.person.重点人员}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '低保人数')"><div class="name">低保人员</div><div class="extra">{{girdInfo.person.低保人数}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '社区矫正人员')"><div class="name">社区矫正人员</div><div class="extra">{{girdInfo.person.社区矫正人员}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '残疾人数')"><div class="name">残疾人数</div><div class="extra">{{girdInfo.person.残疾人数}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '安置帮教人员')"><div class="name">安置帮教人员</div><div class="extra">{{girdInfo.person.安置帮教人员}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '少数民族')"><div class="name">少数民族</div><div class="extra">{{girdInfo.person.少数民族}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '易肇事肇祸精神病')"><div class="name">易肇事肇祸精神病</div><div class="extra">{{girdInfo.person.易肇事肇祸精神病}}人</div></div>
                <div class="item curpointer" @click="openInfoFrame('person', '吸毒人员')"><div class="name">吸毒人员</div><div class="extra">{{girdInfo.person.吸毒人员}}人</div></div>
              </div>
            </div>
          </div>
          <div class="infos-item" style="height: 250px;">
            <div class="itemtitle">党建信息</div>
            <div class="itemcanvs djxx">
              <div class="item curpointer" @click="openInfoFrame('dangjian', '党员数')"><div><div class="extra">{{girdInfo.dangjian.党员数}}</div><div class="name">党员</div></div></div>
              <div class="item curpointer" @click="openInfoFrame('dangjian', '党总支')"><div><div class="extra">{{girdInfo.dangjian.党总支}}</div><div class="name">党总支</div></div></div>
              <div class="item curpointer" @click="openInfoFrame('dangjian', '组织数')"><div><div class="extra">{{girdInfo.dangjian.组织数}}</div><div class="name">组织数</div></div></div>
              <div class="item curpointer" @click="openInfoFrame('dangjian', '优秀党员')"><div><div class="extra">{{girdInfo.dangjian.优秀党员}}</div><div class="name">优秀党员</div></div></div>
              <div class="item curpointer" @click="openInfoFrame('dangjian', '困难党员')"><div><div class="extra">{{girdInfo.dangjian.困难党员}}</div><div class="name">困难党员</div></div></div>
              <div class="item curpointer" @click="openInfoFrame('dangjian', '流动党员')"><div><div class="extra">{{girdInfo.dangjian.流动党员}}</div><div class="name">流动党员</div></div></div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="infos-item-block">
            <div class="itemtitle">企业信息</div>
              <div class="itemcanvs rkxx">
                <div class="list-infos">
                <div class="item curpointer" @click="openInfoFrame('company', '企业数')"><div class="name">企业数</div><div class="extra">{{girdInfo.company.企业数}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('company', '从业人数')"><div class="name">从业人数</div><div class="extra">{{girdInfo.company.从业人数}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('company', '侨企')"><div class="name">侨企</div><div class="extra">{{girdInfo.company.侨企}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('company', '台资企业')"><div class="name">台资企业</div><div class="extra">{{girdInfo.company.台资企业}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('company', '外资企业')"><div class="name">外资企业</div><div class="extra">{{girdInfo.company.外资企业}}</div></div>
                <div class="item curpointer"><div class="name">参保人数</div><div class="extra">{{girdInfo.company.参保人数}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('company', '外贸企业')"><div class="name">外贸企业</div><div class="extra">{{girdInfo.company.外贸企业}}</div></div>
                <div class="item curpointer"><div class="name">未及时支付工资</div><div class="extra">{{girdInfo.company.未及时支付工资}}</div></div>
                <div class="item curpointer"><div class="name">裁减人员企业</div><div class="extra">{{girdInfo.company.裁减人员企业}}</div></div>
              </div>
            </div>
          </div>
          <div class="infos-item-block">
            <div class="itemtitle">水利信息</div>
            <div class="itemcanvs rkxx">
              <div class="list-infos">
                <div class="item"><div class="name">水闸数</div><div class="extra">{{girdInfo.shuili.水闸数}}</div></div>
                <div class="item"><div class="name">泵站数</div><div class="extra">{{girdInfo.shuili.泵站数}}</div></div>
              </div>
            </div>
          </div>
          <div class="infos-item-block">
            <div class="itemtitle">宗教场所</div>
            <div class="itemcanvs rkxx">
              <div class="list-infos">
                <div class="item curpointer" @click="openInfoFrame('zongjiao', '合法')"><div class="name">合法</div><div class="extra">{{girdInfo.zongjiao.合法}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('zongjiao', '未经批准')"><div class="name">未经批准</div><div class="extra">{{girdInfo.zongjiao.未经批准}}</div></div>
              </div>
            </div>
          </div>
          <div class="infos-item-block">
            <div class="itemtitle">协税信息</div>
            <div class="itemcanvs rkxx">
              <div class="list-infos">
                <div class="item curpointer" @click="openInfoFrame('tax', '企业')"><div class="name">企业</div><div class="extra">{{girdInfo.tax.企业}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('tax', '个人工商户')"><div class="name">个人工商户</div><div class="extra">{{girdInfo.tax.个人工商户}}</div></div>
              </div>
            </div>
          </div>
          <div class="infos-item-block">
            <div class="itemtitle">263专项</div>
            <div class="itemcanvs rkxx">
              <div class="list-infos">
                <div class="item curpointer" @click="openInfoFrame('zhuanXiang_263', '部门工程')"><div class="name">部门工程</div><div class="extra">{{girdInfo.zhuanXiang_263.部门工程}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('zhuanXiang_263', '自查自曝自改')"><div class="name">自查自曝自改</div><div class="extra">{{girdInfo.zhuanXiang_263.自查自曝自改}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('zhuanXiang_263', '协调会办')"><div class="name">协调会办</div><div class="extra">{{girdInfo.zhuanXiang_263.协调会办}}</div></div>
                <div class="item curpointer" @click="openInfoFrame('zhuanXiang_263', '散乱污排查点')"><div class="name">散乱污排查点</div><div class="extra">{{girdInfo.zhuanXiang_263.散乱污排查点}}</div></div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel> -->
      <div class="dragItem" v-show="wglms[0].active">
        <div class="person-expandBtn" @click="wglms[0].detailExpand = !wglms[0].detailExpand"></div>
        <transition :duration="500" enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
          <div class="map-infos-item animated" v-show="wglms[0].detailExpand">
            <div class="itemtitle curpointer" @click="openLayuiWindow('/datav/popover/yzwy.jsp')" style="color: #ffed00;text-decoration: underline;">一长五员</div>
            <div class="itemcanvs yzwy">
              <div class="item curpointer" @click="openInfoFrame('yzwy', '网格长')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1a.png"></div><div class="name">网格长</div><div class="num">{{girdInfo.yzwy.网格长}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '网格员')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1b.png"></div><div class="name">网格员</div><div class="num">{{girdInfo.yzwy.网格员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '信息员')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1e.png"></div><div class="name">信息员</div><div class="num">{{girdInfo.yzwy.信息员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '巡查员')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1c.png"></div><div class="name">巡查员</div><div class="num">{{girdInfo.yzwy.巡查员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '联络员')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1d.png"></div><div class="name">联络员</div><div class="num">{{girdInfo.yzwy.联络员}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('yzwy', '督查员')"><div class="legend"><img src="/static/imgs/map/1le3khhz2dojy1f.png"></div><div class="name">督查员</div><div class="num">{{girdInfo.yzwy.督查员}}</div></div>
            </div>
            <div class="itemtitle curpointer" @click="openLayuiWindow('/datav/turnjs4/samples/docs/index.html')" style="color: #ffed00;text-decoration: underline;">制度汇编</div>
            <div class="itemtitle curpointer" @click="openLayuiWindow('/datav/sw/ndsjSbList.jsp')" style="color: #ffed00;text-decoration: underline;">协同共治</div>
          </div>
        </transition>
      </div>

      <div class="dragItem" v-show="wglms[1].active">
        <div class="company-expandBtn" @click="wglms[1].detailExpand = !wglms[1].detailExpand"></div>
        <transition :duration="500" enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
          <div class="map-infos-item animated"  v-show="wglms[1].detailExpand">
            <div class="itemtitle">企业信息</div>
            <div class="itemcanvs qqxx">
              <div class="item" v-for="(it, id) in girdInfo.jjyxfx" :key="id">
                <div class="name npoint">{{it.name}}</div><div class="num" style="width: 100px;">{{it.value}}</div>
              </div>
              <!-- <div class="item curpointer" @click="openInfoFrame('company', '企业数')"><div class="name">企业数</div><div class="num">{{girdInfo.company.企业数}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('company', '从业人数')"><div class="name">从业人数</div><div class="num">{{girdInfo.company.从业人数}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('company', '侨企')"><div class="name">侨企</div><div class="num">{{girdInfo.company.侨企}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('company', '台资企业')"><div class="name">台资企业</div><div class="num">{{girdInfo.company.台资企业}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('company', '外贸企业')"><div class="name">外贸企业</div><div class="num">{{girdInfo.company.外贸企业}}</div></div>
              <div class="item"><div class="name npoint">参保人数</div><div class="num">{{girdInfo.company.参保人数}}</div></div>
              <div class="item"><div class="name npoint">未及时支付工资</div><div class="num">{{girdInfo.company.未及时支付工资}}</div></div>
              <div class="item"><div class="name npoint">裁减人员企业</div><div class="num">{{girdInfo.company.裁减人员企业}}</div></div> -->
            </div>
          </div>
        </transition>
      </div>

      <div class="dragItem" v-show="wglms[2].active">
        <div class="person-expandBtn" @click="wglms[2].detailExpand = !wglms[2].detailExpand"></div>
        <transition :duration="500" enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
          <div class="map-infos-item animated"  v-show="wglms[2].detailExpand">
            <div class="itemtitle">人口信息</div>
            <div class="itemcanvs qqxx">
              <div class="item curpointer" @click="openInfoFrame('person', '户数')"><div class="name npoint">户数</div><div class="num">{{girdInfo.person.户数}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '人口数')"><div class="name npoint">人口数</div><div class="num">{{girdInfo.person.人口数}}</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '少数民族')"><div class="name">少数民族</div><div class="num">{{girdInfo.person.少数民族}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '低保户')"><div class="name">低保户</div><div class="num">{{girdInfo.person.低保户}}户</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '低保人数')"><div class="name">低保人员</div><div class="num">{{girdInfo.person.低保人数}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '残疾人数')"><div class="name">残疾人数</div><div class="num">{{girdInfo.person.残疾人数}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '重点人员')"><div class="name">重点帮扶人员</div><div class="num">{{girdInfo.person.重点人员}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '社区矫正人员')"><div class="name">社区矫正人员</div><div class="num">{{girdInfo.person.社区矫正人员}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '安置帮教人员')"><div class="name">安置帮教人员</div><div class="num">{{girdInfo.person.安置帮教人员}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '易肇事肇祸精神病')"><div class="name">易肇事肇祸精神病</div><div class="num">{{girdInfo.person.易肇事肇祸精神病}}人</div></div>
              <div class="item curpointer" @click="openInfoFrame('person', '吸毒人员')"><div class="name">吸毒人员</div><div class="num">{{girdInfo.person.吸毒人员}}人</div></div>
              <div class="item"><div class="name npoint">参保人数</div><div class="num">{{girdInfo.company.参保人数}}</div></div>
              <!-- <div class="item"><div class="name npoint">未及时支付工资</div><div class="num">{{girdInfo.company.未及时支付工资}}</div></div>
              <div class="item"><div class="name npoint">裁减人员企业</div><div class="num">{{girdInfo.company.裁减人员企业}}</div></div> -->
            </div>
          </div>
        </transition>
      </div>

      <div class="infos-right" style="display:none;">
        <div class="infos-item-block">
          <div class="itemtitle">各网格亩均产值</div>
          <div id="chartJjyyWgmjcz" style="width:540px;height:850px;" ref="chartJjyyWgmjcz"></div>
        </div>
      </div>
    </div>
    <div id="wghfx">
      <div class="headerp">
        <div class="itemt" :class="{active: wglms[0].active}" @click="handleRightOptions(0)">{{wglms[0].name}}</div>
        <div class="itemt" :class="{active: wglms[2].active}" @click="handleRightOptions(2)">{{wglms[2].name}}</div>
        <div class="itemt" :class="{active: wglms[3].active}" @click="handleRightOptions(3)">{{wglms[3].name}}</div>
        <div class="itemt" :class="{active: wglms[4].active}" @click="handleRightOptions(4)">{{wglms[4].name}}</div>
        <div class="itemt" :class="{active: wglms[5].active}" @click="handleRightOptions(5)">{{wglms[5].name}}</div>
        <div class="itemt" :class="{active: wglms[6].active}" @click="handleRightOptions(6)">{{wglms[6].name}}</div>
        <div class="itemt" :class="{active: wglms[1].active}" @click="handleRightOptions(1)">{{wglms[1].name}}</div>
        <div class="itemt" @click="showTqfx()">团情分析</div>
      </div>
    </div>
    <div id="wghfx" class="left">
      <!-- 网格化分析 -->
      <div class="maincp" v-show="wglms[0].active">
        <div class="item" style="height: 420px;width: 950px;">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">今日考勤</div>
          <div class="wghfx-jrkq" style="height: 375px;width: 950px;zoom:0.95;">
            <el-carousel class="left" :interval="3000">
              <el-carousel-item>
                <div class="sjq"><BeautyBall :range="wghfxKqData.summary"/></div>
                <div class="text">里程达标率</div>
              </el-carousel-item>
              <!-- <el-carousel-item>
                <div class="sjq"><BeautyBall :range="wghfxKqData.summary2" :color="'#1c31d1'"/></div>
                <div class="text">时长达标率</div>
              </el-carousel-item> -->
            </el-carousel>

            <div class="right">
              <div class="kq-group">
                <div class="group-name">网格员</div>
                <div class="group-items">
                  <div class="item" v-for="(item, index) in wghfxKqData.kq[0]" :key="index" >
                    <div class="item-name">{{item.name}}</div>
                    <StyleBar class="style-bar" :val="item.value" :sum="item.sum"/>
                    <div class="item-num curpointer" @click="openLayuiWindow('/datav/view/showWgInfoList.jsp', {type: wghfxKqData.types[index], person: 'wgy'})">{{item.value}} 人</div>
                  </div>
                </div>
              </div>
              <div class="kq-group">
                <div class="group-name">巡查员</div>
                <div class="group-items">
                  <div class="item" v-for="(item, index) in wghfxKqData.kq[1]" :key="index" >
                    <div class="item-name">{{item.name}}</div>
                    <StyleBar class="style-bar" :val="item.value" :sum="item.sum"/>
                    <div class="item-num curpointer" @click="openLayuiWindow('/datav/view/showWgInfoList.jsp', {type: wghfxKqData.types[index], person: 'xcy'})">{{item.value}} 人</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" style="height: 420px;width: 860px;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">今日上报事件滚动列表</div>
          <marquee v-if="wghfxJrsbsjgdlb.length" :duration="600" :interval="5000" class="sbsjtjList" style="height: 348px;width: 860px; margin-top: 20px; overflow: hidden;">
            <div class="gd-item" v-for="(item, index) in wghfxJrsbsjgdlb" :key="index">
              <div class="type">{{item.name}}</div>
              <div class="rp">
                <div class="content" @click="openLayuiWindow('/datav/list/sj/eventView.jsp', {id: item.id});"><span class="date">上报时间：{{item.date.slice(5, 16)}}</span>{{item.content}}</div>
              </div>
            </div>
          </marquee>
        </div>
      </div>
      <!-- 经济运行分析 -->
      <div class="maincp" v-show="wglms[1].active">
        <div class="item" style="height: 420px;width: 240px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="">开票销售占比</div>
          <div id="chart-jjyx-kpxszb" style="height: 375px;width: 240px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 240px;">
          <div class="title-head">入库税金占比</div>
          <div id="chart-jjyx-rksjzb" style="height: 375px;width: 240px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 400px;">
          <div class="title-head">行业前十分类占比</div>
          <div id="chart-jjyx-qshyzb" style="height: 375px;width: 400;"></div>
        </div>
        <div class="item" style="height: 420px;width: 880px;" v-show="wgTree.length == 1">
          <div class="title-head"><img src="/static/imgs/wgh/38.png" alt="">全镇历年主要经济指标</div>
          <div id="chart-jjyx-qzqnmjqsfx" style="height: 375px;width:880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 880px;" v-show="wgTree.length > 1">
          <div class="title-head"><img src="/static/imgs/wgh/38.png" alt="">村历年主要经济指标</div>
          <div id="chart-jjyx-qzqnmjqsfx-gc" style="height: 375px;width:880px;"></div>
        </div>
      </div>
      <!-- 人口分析 -->
      <div class="maincp" v-show="wglms[2].active && wglms[2].panelInfo.panelNo == 1">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="" @click="wglms[2].panelInfo.panelNo = 2">
            人口流动分析
            <div class="tab-change-bar">
              <div class="item" :class="{active: wglms[2].panelInfo.rkld == 1}" @click="wglms[2].panelInfo.rkld = 1">历年人口流动趋势</div>
              <div class="item" :class="{active: wglms[2].panelInfo.rkld == 2}" @click="wglms[2].panelInfo.rkld = 2">今年人口流动分析</div>
            </div>
          </div>
          <div style="height: 375px;width: 880px;" v-show="wglms[2].panelInfo.rkld == 2">
            <iframe :src="'/datav/common/wgh_rkld.html' | productEnv" frameborder="0" style="width: 100%; height:100%;"></iframe>
          </div>
          <div id="chart-rkfx-rkldfx" style="height: 375px;width: 880px;" v-show="wglms[2].panelInfo.rkld == 1">
          </div>
        </div>
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">重点人群分析</div>
          <div id="chart-rkfx-zdrqfx" style="height: 415px;width: 310px;margin-left: -60px;float:left">
          </div>
          <div id="chart-rkfx-zdrqndfx" style="height: 415px;width: 630px;float:right">
          </div>
        </div>
      </div>
      <!-- 人口分析 版面2-->
      <div class="maincp" v-show="wglms[2].active && wglms[2].panelInfo.panelNo == 2">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="" @click="wglms[2].panelInfo.panelNo = 1">人口自然增长趋势
          </div>
          <div id="chart-rkfx-rkzrzzqs" style="height: 375px;width: 880px;">
          </div>
        </div>
        <div class="item" style="height: 420px;width: 880px;">
          <!-- <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">人口老龄化趋势</div> -->
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">养老资源分析</div>
          <!-- <div class="llhqs-left" style="height:375px;width:320px;float:left;"></div> -->
          <div class="ylzyfx" style="height: 375px;width: 280px; float:left">
            <div class="title">养老资源总计</div>
            <div class="item _1" attr-title="养老院">
              <div class="cont">
                <div class="num">{{dataYlzyFx[0]}}</div>
                <div class="dw">家</div>
              </div>
            </div>
            <div class="item _2" attr-title="养老资源">
              <div class="cont" style="left:21px;">
                <div class="num">{{dataYlzyFx[1]}}</div>
                <div class="dw">床</div>
              </div>
            </div>
            <div class="title">今年新增养老资源</div>
            <div class="item _3" attr-title="养老院">
              <div class="cont">
                <div class="num">{{dataYlzyFx[2]}}</div>
                <div class="dw">家</div>
              </div>
            </div>
            <div class="item _4" attr-title="养老资源">
              <div class="cont" style="left:21px;">
                <div class="num">{{dataYlzyFx[3]}}</div>
                <div class="dw">床</div>
              </div>
            </div>
          </div>
          <div id="chart-rkfx-rkllhqs" style="height: 375px;width: 600px; margin-top: 20px;float:right"></div>
        </div>
      </div>
      <!-- 12345 -->
      <div class="maincp" v-show="wglms[3].active">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="">实时滚动工单列表</div>
          <div style="margin: 25px 0;">
            <marquee v-if="a2345SSgdgllb.length" :duration="600" :interval="3000" style="height:300px;" class="ssgdgdList">
              <div class="gd-item" v-for="(item, index) in a2345SSgdgllb" :key="index">
                <div class="title" @click="openLayuiWindow('/datav/list/gd/eventView.jsp', {id: item.id});">{{item.name}}</div><div class="date">{{item.date.slice(0, 10)}}</div>
              </div>
            </marquee>
          </div>
        </div>
        <div class="item" style="height: 420px;width: 880px;">
          <el-carousel class="left" :interval="5000" direction="vertical" arrow="never" height="450px" style="height:450px;">
            <el-carousel-item>
              <div class="title-head"><img src="/static/imgs/wgh/37.png" alt="">受理量趋势</div>
              <div id="chart-12345-sllqs" style="height: 375px;width:880px;"></div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="title-head"><img src="/static/imgs/wgh/38.png" alt="">受理情况统计表</div>
              <div id="chart-12345-jdxcg" style="height: 375px;width:880px;"></div>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>
      <!-- 舆情分析 -->
      <div class="maincp" v-show="wglms[4].active" style="overflow: hidden;">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">月度趋势折线图</div>
          <div id="chart-yqfx-ydqszxt" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/38.png" alt="">来源统计</div>
           <div id="chart-yqfx-lytj" style="height: 375px;width:880px;"></div>
        </div>
      </div>
      <!-- 矛盾分析 -->
      <div class="maincp" v-show="wglms[5].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 850px;">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">趋势折线图</div>
          <div id="chart-mdfx-qszxt" style="height: 375px;width: 850px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 400px;">
          <div class="title-head"><img src="/static/imgs/wgh/73.png" alt="">激烈程度占比</div>
          <div id="chart-mdfx-jlcdzb"  style="height: 375px;width: 400px;margin-left: -70px;">
          </div>
        </div>
        <div class="item" style="height: 420px;width: 480px;">
          <div class="title-head"><img src="/static/imgs/wgh/40.png" alt="">信访工作情况统计表</div>
          <div id="chart-mdfx-xfgzqk"  style="height: 375px;width: 480px;">
          </div>
        </div>
      </div>
      <!-- 263分析 -->
      <div class="maincp" v-show="wglms[6].active">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/40.png" alt="">网格分析</div>
          <div id="chart-263fx-wgfx" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 730px;">
          <div class="title-head"><img src="/static/imgs/wgh/55.png" alt="">散乱污排查点两断三清</div>
           <div id="chart-263fx-slwpcdldsq" style="height: 375px;width:730px;"></div>
        </div>
      </div>
    </div>
    <div id="wghfx" class="right">
      <!-- 网格化分析 -->
      <div class="maincp" v-show="wglms[0].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 880px;margin-left: 30px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="">年度网格事件上报统计</div>
          <div id="chart-wghfx-ndwgsjsbtj" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 440px;">
          <div class="title-head"><img src="/static/imgs/wgh/37.png" alt="">事项分类统计</div>
           <div id="chart-wghfx-sxfltj" style="height: 375px;width:630px;position:relative;zoom:0.8;margin-top:40px;">
              <div class="extra" style="" ref="sxfltjBlock">事项</div>
           </div>
        </div>
        <div class="item" style="height: 420px;width: 480px;">
          <div class="title-head"><img src="/static/imgs/wgh/41.png" alt="">高发问题排行统计</div>
          <div class="gfwtpxtjList" style="height: 375px;width: 480px; margin-top: 20px;">
            <div class="item" v-for="(item, index) in wghfxGfwtphxt" :key="index">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content" style="width: 200px;font-size: 20px;">{{item.name}}</div>
                <div class="name" @click="openLayuiWindow('/datav/popover/gfwtph.jsp', {serialNumber: item.serialNumber})">{{item.name}}</div>
              </el-tooltip>
              <div class="val">{{item.value}}条</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 经济运行分析 -->
      <div class="maincp" v-show="wglms[1].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 880px;" v-show="wgTree.length == 1">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">全镇主要经济指标</div>
          <div id="chart-jjyx-gckpxsx" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 880px;" v-show="wgTree.length > 1">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">村级主要经济指标</div>
          <div id="chart-jjyx-gckpxsx-cj" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 440px;width: 440px;margin-right: 20px;overflow:hidden;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">企业销售排行</div>
          <div style="height: 440px;width: 440px;display: flex;overflow:hidden;">
            <div class="qyph-list">
              <div class="header"><div class="t1">排名</div><div class="t2">企业</div></div>
              <div class="boder">
                <div class="len" v-for="(item, index) in jjyxQyxnph.xs" :key="index">
                  <div class="t1" :class="'_'+item.order">{{item.order | tenFmt}}</div>
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <div slot="content" style="width: 300px;font-size: 20px;">{{item.name}}</div>
                    <div class="t2">{{item.name}}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" style="height: 440px;width: 440px;overflow:hidden;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">企业税金排行</div>
          <div style="height: 440px;width: 440px;display: flex;overflow:hidden;">
            <div class="qyph-list">
              <div class="header"><div class="t1">排名</div><div class="t2">企业</div></div>
              <div class="boder">
                <div class="len" v-for="(item, index) in jjyxQyxnph.sj" :key="index">
                  <div class="t1" :class="'_'+item.order">{{item.order | tenFmt}}</div>
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <div slot="content" style="width: 300px;font-size: 20px;">{{item.name}}</div>
                    <div class="t2">{{item.name}}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 人口分析 -->
      <div class="maincp" v-show="wglms[2].active && wglms[2].panelInfo.panelNo == 1">
        <div class="item" style="height: 375px;width: 980px;position:relative;">
          <div class="title-head"><img src="/static/imgs/wgh/41.png" alt="">年龄段分析</div>
          <div id="chart-rkfx-nldfx" style="height: 375px;width: 650px;"></div>
          <div class="jiehun-info">
            <div class="item"><div class="x1">未婚比例</div><div class="x2">{{rmfxDataJhl[1] | percentFmt}}</div></div>
            <div class="item"><div class="x1">已婚未育</div><div class="x2">{{rmfxDataJhl[2] | percentFmt}}</div></div>
            <div class="item"><div class="x1">已婚已育</div><div class="x2">{{rmfxDataJhl[0] | percentFmt}}</div></div>
          </div>
        </div>
        <div class="item" style="height: 480px; width: 980px; margin-top: 50px; overflow: hidden;">
          <div class="title-head" style="margin-bottom: 26px;"><img src="/static/imgs/wgh/37.png" alt="">帮扶对象分析</div>
           <div id="chart-rkfx-bfdxfx" style="height: 415px;width: 300px;margin-left: -30px;margin-top: -30px;float:left;">
           </div>
           <div id="chart-rkfx-bfryndfx" style="height: 415px; width: 630px; float: right;">
           </div>
        </div>
      </div>
      <!-- 人口分析 版面2-->
      <div class="maincp" v-show="wglms[2].active && wglms[2].panelInfo.panelNo == 2">
        <div class="item" style="height: 420px;width: 950px;overflow: hidden;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">教育</div>
          <div style="height: 375px;width: 610px; margin-top: 20px;float:left">
            <div class="jytable">
              <div class="table-head">
                <div class="td _60" style="min-width: 240px;">年龄段</div>
                <div class="td _60" style="min-width: 180px;">人数/人</div>
                <div class="td" style="min-width: 190px;text-align: center;line-height: 42px;">教育资源/所<div class="flex"><div class="it">公立</div><div class="it">私立</div></div></div>
              </div>
              <div class="table-body">
                <div class="len"><div class="it1">学前教育</div><div class="it2">{{rkfxJydata[0].人数}}</div><div class="it3">{{rkfxJydata[0].公立}}</div><div class="it3">{{rkfxJydata[0].私立}}</div></div>
                <div class="len"><div class="it1">小学教育</div><div class="it2">{{rkfxJydata[1].人数}}</div><div class="it3">{{rkfxJydata[1].公立}}</div><div class="it3">{{rkfxJydata[1].私立}}</div></div>
                <div class="len"><div class="it1">初中教育</div><div class="it2">{{rkfxJydata[2].人数}}</div><div class="it3">{{rkfxJydata[2].公立}}</div><div class="it3">{{rkfxJydata[2].私立}}</div></div>
              </div>
            </div>
          </div>
          <div id="chart-rkfx-jy" style="height: 375px;width: 300px;float:right;"></div>
        </div>
        <div class="item" style="height: 420px;width: 950px;">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">各村人口分析</div>
          <div id="chart-rkfx-wgfx" style="height: 375px;width: 950px;">
          </div>
        </div>
      </div>
      <!-- 12345 -->
      <div class="maincp" v-show="wglms[3].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/33.png" alt="">网格总体情况分析</div>
          <div id="chart-12345-wgztfx" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 440px;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">类型统计</div>
          <div id="chart-12345-lxtj" style="height: 375px;width: 630px;">
          </div>
        </div>
        <div class="item" style="height: 420px;width: 240px;margin-left: 120px;">
          <div class="title-head" style="margin-left: 40px;"><img src="/static/imgs/wgh/36.png" alt="">满意度</div>
           <div class="chart-12345-myd" id="chart-12345-myd" style="height: 375px;width: 480px;zoom:0.85;">
             <el-progress class="myd-process" type="circle" :stroke-width="10" :percentage="chart12345Myd" ref="chart12345Myd"></el-progress>
           </div>
        </div>
      </div>
      <!-- 舆情分析 -->
      <div class="maincp" v-show="wglms[4].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 910px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="">实时舆情工单列表信息</div>
          <div style="margin: 25px 0;">
            <marquee v-if="yqfxSSgdgllb.length" :duration="600" :interval="3000" style="height:300px;" class="ssgdgdList">
              <div class="gd-item" v-for="(item, index) in yqfxSSgdgllb" :key="index">
                <div class="title" @click="openLayuiWindow('/datav/list/yq/eventView.jsp', {id: item.id});">{{item.name}}</div><div class="date">{{item.date.slice(0, 10)}}</div>
              </div>
            </marquee>
          </div>
        </div>
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/35.png" alt="">网格总体情况</div>
          <div id="chart-wqfx-wgztqk" style="height: 375px;width: 880px;">
          </div>
        </div>
      </div>
      <!-- 矛盾分析 -->
      <div class="maincp" v-show="wglms[5].active" style="overflow:hidden;">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/34.png" alt="">矛盾类型占比</div>
          <div id="chart-mdfx-mdlxzb" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 980px;">
          <div class="title-head"><img src="/static/imgs/wgh/38.png" alt="">网格总体情况</div>
           <div id="chart-mdfx-wgztqk"  style="height: 375px;width:980px;"></div>
        </div>
      </div>
      <!-- 263分析 -->
      <div class="maincp" v-show="wglms[6].active">
        <div class="item" style="height: 420px;width: 880px;">
          <div class="title-head"><img src="/static/imgs/wgh/39.png" alt="">自查自曝网格统计情况</div>
          <div id="chart-263fx-zczbwgtjqk" style="height: 375px;width: 880px;"></div>
        </div>
        <div class="item" style="height: 420px;width: 440px;">
          <div class="title-head"><img src="/static/imgs/wgh/54.png" alt="">自查自曝分类统计</div>
          <div id="chart-263fx-zczbfltj" style="height: 375px;width: 630px;">
          </div>
        </div>
        <div class="item" style="height: 420px;width: 480px;">
          <div class="title-head"><img src="/static/imgs/wgh/56.png" alt="">散乱排污整改情况</div>
           <div id="chart-263fx-slpwzgqk" style="height: 375px;width:490px;position: relative;">
             <div class="slpw-title"><div>散乱污排查点</div><div>自查自曝自改</div></div>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LwMap from '@/components/lwmap/gaode/index';
  import '@/components/time';
  // import boundaryData from '@/json/xiaka.js';
  // import chinaProvinceData from '@/json/china-province.js';
  import G2 from './MyG2';
  import DataSet from '@antv/data-set';
  import StyleBar from './component/StyleBar';
  import BeautyBall from './component/BeautyBall/index';
  import Marquee from './component/vue-marquee';
  const layui = require('layui');
  const boundaryData = window.boundaryData;

  /**
   * mapMenuOptionsMapper
   * 标注点映射表 设置count时的索引 提升性能
   * var brr = {};
   * mapMenuOptions.forEach((item, index)=> {item.childs.forEach((o, i) => {brr[o.id] = [index, i]})})
   * console.log(JSON.stringify(brr));
   */
  // eslint-disable-next-line
  // const mapMenuOptionsMapper = {"19jo8pecdvw2f":[0,0],"luk1ojf25weq":[0,1],"1hgq8ysha0ffn":[1,0],"1k58ue1iifvqg":[1,1],"97bqeyjvhg2j":[1,2],"tc720f8qzjsk":[1,3],"4bsj7d9cm8zr":[1,4],"123vl2x3ldha4":[1,5],"5r6q2jah22hr":[1,6],"1efxyhs0ebx80":[1,7],"1ura96ek3fr21":[1,8],"1ktjag6y1937u":[2,0],"4s3j1clfpspo":[2,1],"1n7guj6xhhyw7":[2,2],"1q9l109fpyttu":[2,3],"l41v01i3y1mx":[2,4],"1qokwp0wj3myy":[2,5],"moohpi0jb7va":[2,6],"un1k7j9ba8e":[3,0],"lgwo0vqid6a3":[3,1],"1unh1t9w12ilc":[3,2],"qf7w4t4d9h5r":[3,3],"7va61phu5tbz":[3,4],"95jtmhsbh78":[4,0],"1qgcbibvsj48w":[4,1],"1s6t6ppqbaa2r":[4,2]};
  export default {
    name: 'Login',
    components: { StyleBar, BeautyBall, Marquee },
    data () {
      var vm = this;
      var wglms = [
        { name: '网格信息分析', active: true, inited: true, foo: 'initWghfx', detailExpand: false, onclick: () => {
          vm.setMapOption('');
          vm.map.clearActivities();
        } },
        { name: '经济运行分析', active: false, inited: false, foo: 'initJjyxfx', detailExpand: false, onclick: () => {
          // 自动跳到 人员
          // vm.handleMapOptions(0);
          vm.map.clearActivities();
          vm.mapOption = {id: '1qgcbibvsj48w'};
          vm.addActivityIconsInMap();
        } },
        { name: '人口分析', active: false, inited: false, foo: 'initRkfx', detailExpand: false,
          panelInfo: {
            panelNo: 1,
            rkld: 2
          },
          onclick: () => {
          // 自动跳到 人员
          // vm.handleMapOptions(0);
          var index = 0; // 人员的index
          vm.$Util.toggleAttr(vm.mapMenuOptions, index);
          vm.showMenuDetails = index + 1;
          vm.map.clearActivities();
          vm.setMapOption('19jo8pecdvw2f');
          // vm.addActivityIconsInMap();
        } },
        { name: '12345分析', active: false, inited: false, foo: 'init12345', onclick: () => {
          // 自动跳到 事项
          var index = 2; // 事项的index
          vm.$Util.toggleAttr(vm.mapMenuOptions, index);
          vm.showMenuDetails = index + 1;
          vm.map.clearActivities();
          vm.setMapOption('1q9l109fpyttu');
          vm.addActivityIconsInMap();
        } },
        { name: '舆情分析', active: false, inited: false, foo: 'initYqfx', onclick: () => {
          // 自动跳到 事项
          var index = 2; // 事项的index
          vm.$Util.toggleAttr(vm.mapMenuOptions, index);
          vm.showMenuDetails = index + 1;
          vm.map.clearActivities();
          vm.setMapOption('1n7guj6xhhyw7');
          vm.addActivityIconsInMap();
        } },
        { name: '矛盾分析', active: false, inited: false, foo: 'initMdfx', onclick: () => {
          // 自动跳到 事项
          var index = 2; // 事项的index
          vm.$Util.toggleAttr(vm.mapMenuOptions, index);
          vm.showMenuDetails = index + 1;
          vm.map.clearActivities();
          vm.setMapOption('4s3j1clfpspo');
          vm.addActivityIconsInMap();
        } },
        { name: '263分析', active: false, inited: false, foo: 'init263fx', onclick: () => {
          // 自动跳到 事项
          var index = 2; // 事项的index
          vm.$Util.toggleAttr(vm.mapMenuOptions, index);
          vm.showMenuDetails = index + 1;
          vm.map.clearActivities();
          vm.setMapOption('1qokwp0wj3myy');
          vm.addActivityIconsInMap();
        } }
      ];
      var mapMenuOptions = [{
        name: '人员',
        active: false,
        alias: 'ry',
        id: "1le3khhz2dojy",
        childs: [{
            id: "19jo8pecdvw2f",
            name: "人口信息",
            count: 0,
            active: false,
            parentId: "1le3khhz2dojy",
            // hideCount: true,
            afterClick: function () {
              vm.handleRightOptions(2, true);
            },
            expand: true,
            child: [
            {
              id: "19jo8pecdvw2f1",
              name: "流动人口",
              parentId: "19jo8pecdvw2f",
              count: 0,
              active: false
              },
              {
              id: "19jo8pecdvw2f2",
              name: "户籍人口",
              parentId: "19jo8pecdvw2f",
              count: 0,
              active: false
              },
              {
              id: "1eonrud4i056s",
              name: '百岁老人',
              parentId: "19jo8pecdvw2f",
              count: 0,
              active: false
              }
            ]
          },
          {
            id: "luk1ojf25weq",
            name: "群租房",
            count: 0,
            active: false,
            parentId: "1le3khhz2dojy"
          },
          // {
          //   id: "1le3khhz2dojy2",
          //   name: "领导班子",
          //   parentId: "1le3khhz2dojy",
          //   count: 0
          // },
          {
            id: "1le3khhz2dojy1",
            name: "一长五员",
            parentId: "1le3khhz2dojy",
            count: 0,
            expand: true,
            child: [{
                id: "1le3khhz2dojy1a",
                name: "网格长",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1b",
                name: "网格员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1e",
                name: "信息员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1c",
                name: "巡查员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1d",
                name: "联络员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              },
              {
                id: "1le3khhz2dojy1f",
                name: "督查员",
                parentId: "1le3khhz2dojy1",
                count: 0,
                active: false
              }
            ],
            especialControl: true // 客户傻逼需求
          }
        ]
        },
        {
          name: '场所',
          id: "1t1eb8c8i973e",
          active: false,
          alias: 'cs',
          childs: [{
              id: "1hgq8ysha0ffn",
              name: "学校",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [{
                  id: "1hgq8ysha0ffn1",
                  name: "幼儿园",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn2",
                  name: "小学",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn3",
                  name: "初中",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                },
                {
                  id: "1hgq8ysha0ffn4",
                  name: "高中",
                  parentId: "1hgq8ysha0ffn",
                  count: 0,
                active: false
                }
              ]
            },
            {
              id: "1k58ue1iifvqg",
              name: "医院",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [{
                  id: "1k58ue1iifvqg2",
                  name: "社区医院",
                  parentId: "1k58ue1iifvqg",
                  count: 0,
                active: false
                },
                {
                  id: "1k58ue1iifvqg1",
                  name: "村社区卫生服务站",
                  parentId: "1k58ue1iifvqg",
                  count: 0,
                active: false
                }
              ]
            },
            {
              id: "97bqeyjvhg2j",
              name: "门店",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "tc720f8qzjsk",
              name: "转运点",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "4bsj7d9cm8zr",
              name: "宗教场所",
              parentId: "1t1eb8c8i973e",
              count: 0,
              expand: false,
              child: [
                {
                  id: "4bsj7d9cm8zr0",
                  name: "合法场所",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false,
                  child: [
                    {
                      id: "4bsj7d9cm8zr1",
                      name: "佛教",
                      parentId: "4bsj7d9cm8zr0",
                      count: 0,
                      active: false
                    },
                    {
                      id: "4bsj7d9cm8zr2",
                      name: "道教",
                      parentId: "4bsj7d9cm8zr0",
                      count: 0,
                      active: false
                    },
                    {
                      id: "4bsj7d9cm8zr3",
                      name: "基督教",
                      parentId: "4bsj7d9cm8zr0",
                      count: 0,
                      active: false
                    },
                    {
                      id: "4bsj7d9cm8zr4",
                      name: "天主教",
                      parentId: "4bsj7d9cm8zr0",
                      count: 0
                    }
                  ]
                },
                {
                  id: "4bsj7d9cm8zr5",
                  name: "民间信仰",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                },
                {
                  id: "4bsj7d9cm8zr6",
                  name: "未经批准场所",
                  parentId: "4bsj7d9cm8zr",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "123vl2x3ldha4",
              name: "文化场所",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "5r6q2jah22hr",
              name: "排涝站",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "1efxyhs0ebx80",
              name: "微型消防工作站",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            },
            {
              id: "1ura96ek3fr21",
              name: "救灾物资储备点",
              parentId: "1t1eb8c8i973e",
              count: 0,
              active: false
            }
          ]
        },
        {
          name: '事项',
          id: "6syd7j284ve1",
          active: false,
          alias: 'sx',
          childs: [{
              id: "1ktjag6y1937u",
              name: "信息上报",
              parentId: "6syd7j284ve1",
              count: 0,
              expand: true,
              afterClick: () => {
                vm.handleRightOptions(0);
              },
              child: [{
                  id: "1ktjag6y1937u1",
                  name: "待处理",
                  parentId: "1ktjag6y1937u",
                  count: 0,
                  active: false
                },
                {
                  id: "1ktjag6y1937u2",
                  name: "已处理",
                  parentId: "1ktjag6y1937u",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "4s3j1clfpspo",
              name: "矛盾纠纷",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(5);
              }
            },
            {
              id: "1n7guj6xhhyw7",
              name: "舆情信息",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(4);
              }
            },
            {
              id: "1q9l109fpyttu",
              name: "12345",
              parentId: "6syd7j284ve1",
              count: 0,
              active: false,
              onclick: () => {
                vm.handleRightOptions(3);
              }
            },
            // {
            //   id: "l41v01i3y1mx",
            //   name: "社保预警",
            //   parentId: "6syd7j284ve1",
            //   count: 0,
            //   active: false
            // },
            {
              id: "1qokwp0wj3myy",
              name: "263专项",
              parentId: "6syd7j284ve1",
              count: 0,
              expand: true,
              afterClick: () => {
                vm.handleRightOptions(6);
              },
              child: [{
                  id: "1qokwp0wj3myy1",
                  name: "散乱污排查点",
                  parentId: "1qokwp0wj3myy",
                  count: 0,
                  active: false
                },
                {
                  id: "1qokwp0wj3myy2",
                  name: "自查自曝自改",
                  parentId: "1qokwp0wj3myy",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "moohpi0jb7va",
              name: "专项整治",
              parentId: "6syd7j284ve1",
              count: 0,
              expand: false,
              child: [
                {
                  id: "9iuogsp7s9xo",
                  name: "便民浴室",
                  parentId: "moohpi0jb7va",
                  count: 0,
                  active: false
                },
                {
                  id: "1f2p9o2qqv3eo",
                  name: "燃气安全",
                  parentId: "moohpi0jb7va",
                  count: 0,
                  active: false
                }
              ]
            }, {
            id: "1s6t6ppqbaa2r",
            name: "协税巡查",
            parentId: "moohpi0jb7va",
            count: 0,
            expand: true,
            child: [
              {
                id: "1s6t6ppqbaa2r1",
                name: "企业",
                parentId: "moohpi0jb7va",
                count: 0,
                active: false
              },
              {
                id: "1s6t6ppqbaa2r2",
                name: "个体",
                parentId: "moohpi0jb7va",
                count: 0,
                active: false
              }
            ]
            }
          ]
        },
        {
          name: '部件',
          id: "gyatdn1htull",
          active: false,
          alias: 'yj',
          childs: [{
              id: "un1k7j9ba8e",
              name: "水闸",
              count: 0,
              active: false
            },
            {
              id: "lgwo0vqid6a3",
              name: "泵站",
              count: 0,
              active: false
            },
            {
              id: "1unh1t9w12ilc",
              name: "消防栓",
              count: 0,
              active: false
            },
            {
              id: "qf7w4t4d9h5r",
              name: "文物",
              count: 0,
              active: false
            },
            {
              id: "7va61phu5tbz",
              name: "加油站",
              count: 0,
              active: false
            }
            // ,
            // {
            //   id: "un1k7j9ba8ea",
            //   name: "路灯",
            //   parentId: "gyatdn1htull",
            //   count: 0,
            //   active: false
            // },
            // {
            //   id: "un1k7j9ba8eb",
            //   name: "窨井盖",
            //   parentId: "gyatdn1htull",
            //   count: 0,
            //   active: false
            // },
            // {
            //   id: "un1k7j9ba8ec",
            //   name: "垃圾箱",
            //   parentId: "gyatdn1htull",
            //   count: 0,
            //   active: false
            // }
          ]
        },
        {
          name: '组织',
          id: "19rv2fy2yv63h",
          active: false,
          alias: 'zj',
          expand: false,
          childs: [{
              id: "95jtmhsbh78",
              name: "党组织",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false,
              expand: true,
              child: [
                {
                id: "95jtmhsbh781",
                name: "党委",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh782",
                name: "党总支",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh783",
                name: "党支部",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                },
                {
                id: "95jtmhsbh784",
                name: "党建联盟",
                parentId: "95jtmhsbh78",
                count: 0,
                active: false
                }
                ]
            },
            {
            id: "95jtmhsbh78d",
            name: "商会",
            parentId: "19rv2fy2yv63h",
            count: 0,
            active: false
            },
            {
              id: "95jtmhsbh78a",
              name: "预备役",
              parentId: "19rv2fy2yv63h",
              count: 0,
              expand: true,
              child: [{
                  id: "95jtmhsbh78aa",
                  name: "应急力量",
                  parentId: "95jtmhsbh78a",
                  count: 0,
                  active: false
                },
                {
                  id: "95jtmhsbh78ab",
                  name: "专业力量",
                  parentId: "95jtmhsbh78a",
                  count: 0,
                  active: false
                }
              ]
            },
            {
              id: "95jtmhsbh78b",
              name: "社会组织",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false
            },
            {
              id: "95jtmhsbh78c",
              name: "志愿者",
              parentId: "19rv2fy2yv63h",
              count: 0,
              active: false
            }
          ]
        }
      ];
      var mapMenuOptionsMapper = {};
      mapMenuOptions.forEach((item, index) => {
        item.childs.forEach((o, i) => {
          mapMenuOptionsMapper[o.id] = [index, i];
          if (o.child) {
            o.child.forEach((cld, id) => {
              mapMenuOptionsMapper[cld.id] = [index, i, id];
            });
          }
        });
      });
      this.mapMenuOptionsMapper = mapMenuOptionsMapper;
      return {
        wgTree: [
          {name: '徐霞客镇', type: 'FeatureCollection'}
        ],
        girdInfo: {
          yzwy: {
            督查员: 0,
            联络员: 0,
            民警: 0,
            网格长: 0,
            网格员: 0,
            信息员: 0,
            巡查员: 0
          },
          person: {
            低保户: "0",
            人口数: "0",
            低保人数: "0",
            户数: 0,
            重点人员: "0",
            少数民族: "0",
            残疾人数: "0",
            社区矫正人员: "0",
            安置帮教人员: "0",
            易肇事肇祸精神病: "0",
            吸毒人员: "0"
          },
          company: {
            企业数: "0",
            从业人数: "0",
            台资企业: 0,
            侨企: 0,
            外资企业: 0,
            外贸企业: 0,
            参保人数: "0",
            裁减人员企业: 0,
            未及时支付工资: 0
          },
          /*
          dangjian: {
            党员数: "0",
            困难党员: "0",
            组织数: 0,
            党总支: 0,
            优秀党员: 0,
            流动党员: 0
          },
          shuili: {
            水闸数: 0,
            泵站数: 0
          },
          zongjiao: {
            合法: 0,
            未经批准: 0
          },
          tax: {
            企业: 0,
            个人工商户: 0
          },
          zhuanXiang_263: {
            部门工程: 0,
            自查自曝自改: 0,
            协调会办: 0,
            散乱污排查点: 0
          }
          */
          jjyxfx: []
        },
        currentGirdNo: '',
        mapMenuOptions,
        showMenuDetails: 0,
        wglms,
        wghfxJrsbsjgdlb: [],
        wghfxGfwtphxt: [],
        wghfxKqData: {
          kq: [ [], [] ],
          summary: 0,
          summary2: 0
        },
        a2345SSgdgllb: [],
        chart12345Myd: 100,
        yqfxSSgdgllb: [],
        jjyxQyxnph: {sj: [], xs: []},
        activityLoading: false,
        rkfxJydata: JSON.parse('[{"年龄端":"学前","公立":8,"人数":3506,"男生":1832,"女生":1674,"私立":5},{"年龄端":"小学","公立":3,"人数":6257,"男生":3356,"女生":2901,"私立":0},{"年龄端":"中学","公立":3,"人数":2618,"男生":1465,"女生":1153,"私立":0}]'),
        rmfxDataJhl: [0, 0, 0],
        dataYlzyFx: [0, 0, 0, 0]
      };
    },
    methods: {
      handleMapOptions: function (index) {
        var vm = this;
        // if (index != -1) {
        //   vm.mapOption = {index: index, type: 'parent', id: vm.mapMenuOptions[index].id};
        // }
        vm.$Util.toggleAttr(vm.mapMenuOptions, index);
        vm.showMenuDetails = index + 1;
        vm.map.clearActivities();
        vm.map.closeInfoWindow();
        // if (index != -1) {
        //   vm.addActivityIconsInMap();
        // }
      },
      handleActivityItemClicked: function (item, click) {
        var vm = this;
        vm.map.closeInfoWindow();
        if (item.onclick) {
          item.onclick();
          return;
        }
        function closeActive (obj) {
          if (obj.child) {
            obj.child.forEach(closeActive);
          } else {
            obj.active = false;
          }
        }
        // debugger
        if (!item.child) {
          vm.mapMenuOptions.forEach((menu, index) => {
            menu.childs.forEach(closeActive);
          });
        } else {
          item.expand = !item.expand;
        }

        if (!item.child) {
          item.active = true;
          vm.mapOption = item;
          vm.map.clearActivities();
          vm.addActivityIconsInMap(click);
        }
        // if (item.child) {
        //   vm.mapOption = {type: 'father', ids: item.child.map((o) => o.id)};
        // } else {
        //   vm.mapOption = {type: 'child', id: item.id};
        //   vm.map.clearActivities();
        //   vm.addActivityIconsInMap(click);
        // }
        item.afterClick && item.afterClick();
      },
      handleRightOptions: function (index, click) {
        var vm = this;
        vm.map.closeInfoWindow();
        // var justify = vm.wglms[1].active;
        vm.$Util.toggleAttr(vm.wglms, index);
        if (!vm.wglms[index].inited) {
          vm[vm.wglms[index].foo]();
          vm.wglms[index].inited = true;
        }
        !click && vm.wglms[index].onclick && vm.wglms[index].onclick();
        if (index == 1) {
          // vm.drawWgmjczChartOnMap();
        } else {
          // justify && vm.map.setRotationAndPitch(-67.94, 41.17);
          vm.map.removeObjByTypename('Histogram');
          setTimeout(() => {
            !vm.wglms[1].active && vm.map.removeObjByTypename('Histogram');
          }, 2000);
        }
      },
      setMapOption (typeId) {
        var vm = this;
        vm.mapOption = {id: typeId};
        vm.mapMenuOptions.forEach((menu, index) => {
          menu.childs.forEach((o, i) => {
            if (o.child) {
              o.child.forEach((cld, id) => {
                if (cld.id == typeId) {
                  cld.active = true;
                  vm.mapOption = cld;
                } else {
                  cld.active = false;
                }
              });
            } else {
              if (o.id == typeId) {
                o.active = true;
                vm.mapOption = o;
              } else {
                o.active = false;
              }
            }
          });
        });
      },
      handeleWgTreeClick (item, index) {
        var vm = this;
        if (vm.map && index == 0) {
          vm.map.setCenterAndZoom([120.315257, 31.774255], 13.45);
          vm.map.removeFeature('Feature');
          vm.map.removeFeature('Terminal');
          vm.wgTree = vm.wgTree.slice(0, 1);
          vm.currentGirdNo = '';
        }
        if (index == 1) {
          vm.map.setCenterAndZoom(item.cp, 15);
          vm.map.removeFeature('Terminal');
          vm.wgTree = vm.wgTree.slice(0, 2);
          var featureData = boundaryData.features.find((n) => n.id == item.id);
          featureData.features.forEach(vm.addFeatureV2);
          vm.currentGirdNo = item.id;
        }
        if (vm.map && index == 2) {
          vm.map.setCenterAndZoom(item.cp, 16);
          vm.currentGirdNo = item.id;
        }
      },
      openInfoFrame: function (entityName, tagName) {
        var vm = this;
        var params = {
          gridId: vm.wgTree.length == 1 ? '' : vm.currentGirdNo,
          entityName,
          tagName
        };
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['50%', '920px'],
            content: [process.env.PRODUCT_URL + "/datav/view/list.jsp?" + vm.$Util.stringify(params), 'no']
          }
        );
      },
      openLayuiWindow: function (url, params) {
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['50%', '920px'],
            content: [process.env.PRODUCT_URL + url + '?' + this.$Util.stringify(params), 'no']
          }
        );
      },
      // 统一请求加载方法
      getAndLoad: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        vm.$http((process.env.NODE_ENV == "production" ? '/' : '') + apiUrl).then(function (res) {
          if (res.data && res.data.code == 0) {
            callback(res.data.data, params);
          } else {
            // vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
            console.error(`获取数据失败[${chartName}]`);
          }
        }, function () {
          // vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
          console.error(`获取数据失败[${chartName}]`);
          this.activityLoading = false;
        });
      },
      getAndLoad2: function (chartName, apiUrl, callback, ...params) {
        var vm = this;
        var host = '';
        if (location.hostname == 'localhost') {
          host = apiUrl.replace('getInfo', 'getInfoByJj');
        } else {
          host = '/' + apiUrl.replace('getInfo', 'getInfoByJj');
        }
        vm.$http(host).then(function (res) {
          if (res.data && res.data.code == 0) {
            callback(res.data.data, params);
          } else {
            console.error(`获取数据失败[${chartName}]`);
            // vm.$notify.error({ title: '错误', message: `获取数据失败[${chartName}]` });
          }
        }, function () {
          console.error(`获取数据失败[${chartName}]`);
          // vm.$notify.error({ title: '错误', message: `服务器未成果响应[${chartName}]` });
          this.activityLoading = false;
        });
      },
      // __测试方法
      generateNodes: function (id) {
        var vm = this;
        var map = this.map;
        boundaryData.features.forEach((feature, index) => {
          feature.features.forEach((gird, no) => {
            if (id == gird.id) {
              var points = map.getRandomPoint(gird.geometry.coordinates[0]);
              points.forEach((po, ind) => {
                vm.map.addBreatheMarker('a' + ind, po, 22, 'danger', '', { type: 'activity' });
              });
              console.log(JSON.stringify(points));
            }
          });
          if (id == feature.id) {
            var points = map.getRandomPoint(feature.geometry.coordinates[0]);
            points.forEach((p, index) => {
              vm.map.addBreatheMarker('a' + index, p, 22, '', '', { type: 'activity' });
            });
            console.log(JSON.stringify(points));
          }
        });
      },
      // 网格信息数据
      initGridInfo: function (data) {
        this.girdInfo = data;
      },
      initActivityInfo: function (data) {
        var vm = this;
        vm.map.clearActivities();

        function setCount (item, typeId, count) {
          if (item.child && item.id != typeId) {
            return item.child.some(c => {
              return setCount(c, typeId, count);
            });
          } else {
            if (item.id == typeId) {
              item.count = count;
              return true;
            } else {
              return false;
            }
          }
        }
        data.forEach((a) => {
          vm.mapMenuOptions.some(menu => {
            return menu.childs.some(child => {
              return setCount(child, a.typeId, a.count);
            });
          });  
          // var indexArr = vm.mapMenuOptionsMapper[a.typeId];
          // if (!indexArr) { return; }
          // if (indexArr.length == 2) {
          //   vm.mapMenuOptions[indexArr[0]].childs[indexArr[1]].count = a.count;
          // } else {
          //   vm.mapMenuOptions[indexArr[0]].childs[indexArr[1]].child[indexArr[2]].count = a.count;
          // }
        });
        vm.activities = data;
        vm.mapOption && vm.addActivityIconsInMap();
        vm.activityLoading = false;
      },
      addActivityIconsInMap: function (click) {
        var vm = this;
        vm.map.removeObjByTypename('Histogram');
        // var childIds = [];
        // if (vm.mapOption.type == 'parent') {
        //   // 大类的所有
        //   vm.mapMenuOptions[vm.mapOption.index].childs.forEach((o) => {
        //     if (o.child) {
        //       o.child.forEach((c) => {
        //         childIds.push(c.id);
        //       });
        //     } else {
        //       childIds.push(o.id);
        //     }
        //   });
        // } else if (vm.mapOption.type == 'father') {
        //   childIds = vm.mapOption.ids;
        // } else {
        //   childIds = [vm.mapOption.id];
        // }
        if (!vm.activities) {
          return;
        }
        vm.activities.forEach(act => {
          // if (childIds.includes(act.typeId)) {
          if (vm.mapOption.id == act.typeId) {
            // vm.map.addMassMarker(act.typeId, act.list, '/static/imgs/map/' + act.typeId + '.png', [26, 26], [13, 13], function (e) {
            //   var id = e.data.id;
            //   vm.getAndLoad(act.typeName, 'api/v3/wgh/getElementInfo.jsp?' + vm.$Util.stringify({
            //     id: id,
            //     typeId: act.typeId,
            //     type: act.typeName
            //   }), vm.showCommonPopover, e.data.lnglat, id);
            // });
            if (!act.list) {
              console.error('接口问题:' + JSON.stringify(act));
              return;
            }
            var animation = Math.random() > 0.5 ? 'BOUNCE' : 'DROP';
            act.list.forEach(ele => {
              const styleMap = {
                '紧急': 'warning',
                '红色': 'warning',
                '橙色': 'orange',
                '黄色': 'yellow',
                '灰色': 'grey'
              };
              vm.map.addBreatheMarker(ele.id, ele.position, 22, (ele.itemLevel && styleMap[ele.itemLevel]) || ('_' + act.typeId), function () {
                  vm.map.removeObjByTypename('activityLine');
                  vm.getAndLoad(act.typeName, 'api/v3/wgh/getElementInfo.jsp?' + vm.$Util.stringify({
                    id: ele.id,
                    typeId: act.typeId,
                    type: act.typeName
                  }), vm.showCommonPopover, ele.position, ele.id);
                },
                { type: 'activity', clz: act.typeId }, '', animation
              );
            });

            // 增加烟花效果
            // click && vm.map.add3DLines(act.typeId, act.list, click);
          }
        });
      },
      showCommonPopover: function (data, params) {
        var popoverHtml = `<div class="common-detail">${this.$FU.obj2HtmlDom(data)}</div>`;
        // this.showPopover = true;
        this.map.showInfoWindow(popoverHtml, params[0]);
      },
      showTqfx: function () {
        window.layer.open({
          closeBtn: true,
          type: 2,
          title: false,
            shadeClose: false,
            shade: 0,
            skin: 'layerSkin',
            area: ['50%', '920px'],
            content: [process.env.PRODUCT_URL + '/datav/main/tqfx.html', 'no']
          }
        );
      },
      // 网格化分析
      initWghfx: function () {
        this.getAndLoad('今日考勤', 'api/v3/wgh/dutyStat.jsp', this.initWghfxJrkq);
        this.getAndLoad('年度网格事件上报统计', 'api/v3/wgh/event/mapStat.jsp', this.initChartWghfxNdwgsjsbtj);
        this.getAndLoad('今日上报事件滚动列表', 'api/v3/wgh/event/list.jsp', this.initWghfxJrsbsjgdlb);
        this.getAndLoad('事项分类统计', 'api/v3/wgh/event/typeStat.jsp', this.initChartWghfxSxfltj);
        this.getAndLoad('高发问题排行统计', 'api/v3/wgh/event/hotStat.jsp', this.initWghfxGfwtphtj);
      },
      initWghfxJrkq: function (data) {
        this.wghfxKqData = {
          summary: data[2].value,
          summary2: data[3].value,
          kq: data.slice(0, 2),
          types: ['dk', 'cx', 'lc']
        };
      },
      initChartWghfxNdwgsjsbtj: function (data) {
        var chart = new G2.Chart({
          container: 'chart-wghfx-ndwgsjsbtj',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '事件数', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(30).opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        });
        var vm = this;
        chart.on('interval:click', ev => {
          vm.openLayuiWindow('/datav/popover/ndsjSbList.jsp', {ptitle: '年度网格事件上报', deptId: ev.data._origin.deptId});
        });
        chart.render();
        chart.$lwData = data;
        setInterval(function () {
          // 随机排序一下
          var newData = chart.$lwData.slice(1).concat(chart.$lwData[0]);
          chart.$lwData = newData;
          chart.changeData(newData);
        }, 5000);
      },
      initWghfxJrsbsjgdlb: function (data) {
        this.wghfxJrsbsjgdlb = data;
      },
      initChartWghfxSxfltj: function (data) {
        var vm = this;
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-wghfx-sxfltj',
          width: 630,
          height: 375,
          padding: [10, 300, 10, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 1,
          innerRadius: 0.65
        });
        chart.intervalStack().position('value').color('name', G2.LW_CONSTANCE.COLOR_PIE);
        chart.tooltip(true, {
          showTitle: false
        });
        data.forEach((element, index) => {
          chart.guide().html({
            position: ['147%', (index + 1) * 10 - 3 + '%'],
            html: `<div class="libar-extra" onclick="openFrame('${process.env.PRODUCT_URL}/datav/popover/sxfltj.jsp?itemType=${element.itemType}&ptitle=事项分类统计')" style="background:${G2.LW_CONSTANCE.COLOR_PIE[index]};">${element.name} ${element.percent}<div class="liba" style="color:${G2.LW_CONSTANCE.COLOR_PIE[index]};">◆</div></div>`,
            zIndex: 0
          });
        });
        chart.legend(false);
        chart.render();
        chart.$lyData = data;
        chart.$lyIndex = 0;
        setInterval(function () {
          var data = chart.$lyData[chart.$lyIndex];
          if (data) {
            chart.$lyIndex++;
          } else {
            chart.$lyIndex = 0;
            data = chart.$lyData[0];
          }
          vm.$refs.sxfltjBlock && (vm.$refs.sxfltjBlock.innerHTML = `<span style="color:${G2.LW_CONSTANCE.COLOR_PIE[chart.$lyIndex]}">${data.name} <br> ${data.value}</span>`);
        }, 5000);
      },
      initWghfxGfwtphtj: function (data) {
        this.wghfxGfwtphxt = data.slice(0, 6);
      },
      // 人口分析方法
      initRkfx: function () {
        var vm = this;
        vm.getAndLoad('人口分析', 'api/v3/wgh/person/stat.jsp', function (data) {
          vm.initChartRkfxWgfx(data.grid);
          vm.initChartRkfxZdrxfx(data.focus);
          vm.initChartRkfxBfdxfx(data.help);
          vm.initChartRkfxNldfx(data.year);
        });
        vm.getAndLoad('人口流动分析', 'api/v3/wgh/person/rkld/getNdZy.jsp', vm.initChartRkfxRkldfx);
        vm.getAndLoad('重点人群年度分析', 'api/v3/wgh/person/zdrq/getNdZy.jsp', vm.initChartRkfxZdrqndfx);
        vm.getAndLoad('帮扶人员年度分析', 'api/v3/wgh/person/bfdx/getNdZy.jsp', vm.initChartRkfxBfryndfx);
        vm.getAndLoad('人口自然增长趋势', 'api/v3/wgh/person/rkzz/getNdZy.jsp', vm.initChartRkfxRkzrzzqs);
        vm.getAndLoad('教育分析', 'api/v3/wgh/person/jy/getNdZy.jsp', vm.initChartJyAndJytable);
        vm.getAndLoad('养老资源', 'api/v3/wgh/person/ylzy/getNdZy.jsp', vm.initChartRkfxYlzy);
        vm.getAndLoad('结婚率', 'api/v3/wgh/person/yhyu/getYhyu.jsp', vm.initRkDataJhl);
      },
      initChartRkfxWgfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-wgfx',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '人数', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        });
        chart.render();
      },
      initChartRkfxRkldfx: function (sourceData) {
        var data = [];
        var view1Data = [];
        sourceData.forEach(n => {
          data.push({ name: '男', type: n.年份, value: n['男'] });
          data.push({ name: '女', type: n.年份, value: n['女'] });
          view1Data.push({ name: '人口数', type: n.年份, value: n['人口数'] });
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkldfx',
          forceFit: true,
          height: 375,
          width: 880,
          padding: [50, 30, 80, 80]
        });
        var view1 = chart.view();
        var view2 = chart.view({
          start: {
            x: 0,
            y: 0.5
          }, // 视图绘图区域的起始点，x、y 数值在 0 - 1 范围内
          end: {
            x: 1,
            y: 1
          } // 视图绘图区域的结束点，x、y 数值在 0 - 1 范围内
        });
        view1.source(view1Data);
        view1.axis('value', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 18,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#3d4a73',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        view1.axis('type', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        view2.axis('value', false);
        view2.axis('type', false);
        view1.line().position('type*value').color('name', ['#20a0ff']).size(4).shape('smooth').style({
          stroke: '#fff',
          lineWidth: 1
        });
        view1.point().position('type*value').color('name').size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.legend(false);
        view2.source(data);
        view2.interval().position('type*value').size(24).color('name', ['#6ab5e0', '#d088d5']).opacity(1).adjust([{
          type: 'dodge',
          marginRatio: 0.0001
        }]).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 18
          },
          formatter: (v) => {
            return v;
          }
        }).tooltip();
        chart.render();
      },
      initChartRkfxZdrxfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-zdrqfx',
          width: 360,
          height: 415,
          padding: [20, 0, 160, 0]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.95,
          innerRadius: 0.7
        });
        chart.intervalStack().position('value').color('name', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).shape('sliceShape');
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="mybottom-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.render();
      },
      initChartRkfxBfdxfx: function (data) {
        var chart = new G2.Chart({
          container: 'chart-rkfx-bfdxfx',
          width: 360,
          height: 415,
          padding: [20, 0, 160, 0]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.95,
          innerRadius: 0.7
        });
        chart.intervalStack().position('value').color('name', ['#EC6F5D', '#DA563D', '#3DB9B9', '#F6A636']);
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="mybottom-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.render();
      },
      initChartRkfxNldfx: function (sourceData) {
        var vm = this;
        var data = [];
        sourceData.forEach(n => {
          data.push({ name: '男', type: n.name, value: n['男'] + 50 });
          data.push({ name: '女', type: n.name, value: n['女'] + 50 });
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-nldfx',
          forceFit: true,
          height: 375,
          width: 650,
          padding: [20, 10, 0, 180]
        });
        chart.axis('value', false);
        chart.axis('type', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'middle'
            }
          },
          tickLine: false
        });
        chart.coord().transpose();
        chart.legend('name', {
          useHtml: true,
          position: 'top', // 设置图例的显示位置
          itemGap: 10, // 图例项之间的间距
          containerTpl: '<div id="rkfx-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.source(data);
        chart.interval().position('type*value').size(14).color('name', ['#6ab5e0', '#d088d5']).opacity(1).adjust([{
          type: 'dodge',
          marginRatio: 1 / 6
        }]).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 18
          },
          formatter: (v) => {
            return v - 50;
          }
        }).tooltip('type*value', (type, value) => {
          return {
            item: type,
            value: value - 50
          };
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0] && ele[0]._origin.type == '百岁老人') {
            vm.handleActivityItemClicked(vm.mapMenuOptions[0].childs[0].child[2]);
          }
        });
        chart.render();
      },
      initChartRkfxZdrqndfx: function (sourceData) {
        var fields = Object.keys(sourceData); // ['社区矫正', '肇事肇祸精神', ...]
        var years = sourceData[fields[0]].map(n => n['年份']); // ['2016, 2017', ...]
        var data = [];
        years.forEach((y, i) => {
          let o = { year: y };
          fields.forEach(f => {
            o[f] = sourceData[f][i]['人数'];
          });
          data.push(o);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: fields,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-zdrqndfx',
          width: 630,
          height: 375,
          padding: [20, 30, 50, 60]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend(false);
        chart.line().position('year*renshu').color('type', ['#EC6F5D', '#3DB9B9', '#F6A636', '#DA563D']).size(3);
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartRkfxBfryndfx: function (sourceData) {
        var keys = Object.keys(sourceData['扶贫结对'][0]).filter(n => n != '年份' && n != '人数');
        var data = [];
        sourceData['扶贫结对'].forEach((n) => {
          let d = {year: n['年份']};
          keys.forEach(k => {
            d[k] = n[k];
          });
          data.push(d);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: keys,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-bfryndfx',
          width: 630,
          height: 375,
          padding: [20, 30, 50, 60]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend(false);
        chart.line().position('year*renshu').color('type', ['#DA563D', '#3DB9B9', '#F6A636', '#EC6F5D']).size(3);
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartRkfxRkzrzzqs: function (sourceData) {
        var keys = ['出生率', '死亡率', '自然增长率'];
        var data = [];
        sourceData.forEach((n) => {
          let d = {year: n['年份'] + '年'};
          let birth = n['出生人数'] / 172498 * 1000;
          let death = n['死亡人数'] / 172498 * 1000;
          d['出生率'] = Number(birth.toFixed(2));
          d['死亡率'] = Number(death.toFixed(2));
          d['自然增长率'] = Number((birth - death).toFixed(2));
          data.push(d);
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: keys,
          key: 'type',
          value: 'renshu'
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkzrzzqs',
          width: 880,
          height: 375,
          padding: [80, 50, 50, 50]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('renshu', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#59ceec',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(3).shape('smooth').tooltip('type*renshu', (type, renshu) => {
          return {
            name: type,
            value: renshu + '‰'
          };
        });
        chart.point().position('year*renshu').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChartJyAndJytable: function (sourceData) {
        this.rkfxJydata = sourceData;
        var chart = new G2.Chart({
          container: 'chart-rkfx-jy',
          width: 300,
          height: 375,
          padding: [30, 30, 30, 30]
        });
        var data1 = [{name: '男生', value: sourceData[0]['男生']}, {name: '女生', value: sourceData[0]['女生']}];
        var data2 = [{name: '男生', value: sourceData[1]['男生']}, {name: '女生', value: sourceData[1]['女生']}];
        var data3 = [{name: '男生', value: sourceData[2]['男生']}, {name: '女生', value: sourceData[2]['女生']}];
        var view1 = chart.view({ start: {x: 0.1, y: 0}, end: { x: 0.9, y: 0.5 } });
        view1.source(data1);
        view1.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view1.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view1.guide().html({position: [0.5, 0.5], html: '<div class="guide_1">幼儿园</div>'});

        var view2 = chart.view({ start: {x: 0, y: 0.5}, end: { x: 0.48, y: 1 } });
        view2.source(data2);
        view2.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view2.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view2.guide().html({position: ['50%', '50%'], html: '<div class="guide_2">小学</div>'});

        var view3 = chart.view({ start: {x: 0.52, y: 0.5}, end: { x: 1, y: 1 } });
        view3.source(data3);
        view3.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        view3.intervalStack().position('value').color('name', ['#39a1fd', '#f2637b']).shape('sliceShape');
        view3.guide().html({position: ['50%', '50%'], html: '<div class="guide_2">初中</div>'});
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend(false);
        chart.render();
      },
      initChartRkfxYlzy: function (data) {
        var sourceData = [];
        data.forEach((n) => {
          sourceData.push(
            {name: '床位数量', year: n['年份'] + '年', value: n['床位数量']}
          );
          sourceData.push(
            {name: '老人数量', year: n['年份'] + '年', value: n['老人数量']}
          );
        });
        var chart = new G2.Chart({
          container: 'chart-rkfx-rkllhqs',
          width: 600,
          height: 375,
          forceFit: true,
          padding: [20, 40, 80, 80]
        });
        chart.source(sourceData, {
          year: {
            range: [ 0, 1 ]
          }
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#0e5c9e',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.axis('value', {
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.legend(false);
        // ['l(90) 0:#18ebe0 1:#0584ef', 'l(90) 0:#5534d4 1:#00ff00']#9877f6   #6ff6fb
        chart.area().position('year*value').color('name', ['#9877f6', '#6ff6fb']).opacity(0.8);
        chart.line().position('year*value').color('name', ['#9877f6', '#6ff6fb']).opacity(1).size(1);
        chart.render();

        var currentYearData = data.pop();
        var lastYearData = data.pop();
        this.dataYlzyFx = [currentYearData['养老院数量'], currentYearData['床位数量'], currentYearData['养老院数量'] - lastYearData['养老院数量'], currentYearData['床位数量'] - lastYearData['床位数量']];
      },
      initRkDataJhl: function (data) {
        var years = Object.keys(data);
        var currentYear = years.pop();
        var dat = data[currentYear];
        var d1 = parseInt(dat['育龄妇女人数']);
        var d2 = parseInt(dat['已婚育龄妇女人数']);
        var d3 = parseInt(dat['未婚育龄妇女人数']);
        var sum = d1 + d2 + d3;
        this.rmfxDataJhl = [d1 / sum, d2 / sum, d3 / sum];
      },
      // 12345分析方法
      init12345: function () {
        this.getAndLoad('网格总体情况分析', 'api/v3/wgh/12345/mapStat.jsp', this.initChart12345Wgztqkfx);
        this.getAndLoad('实时滚动工单列表', 'api/v3/wgh/12345/list.jsp', this.init12345SSgdgllb);
        this.getAndLoad('类型统计', 'api/v3/wgh/12345/typeStat.jsp', this.initChart12345Lxtj);
        this.getAndLoad('受理量趋势', 'api/v3/wgh/12345/monthStat.jsp', this.initChart12345Sllqs);
        this.getAndLoad('满意度', 'api/v3/wgh/12345/mydStat.jsp', this.initChart12345Myd);
        this.initChart12345Jdxcg();
      },
      initChart12345Wgztqkfx: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-12345-wgztfx',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '事件', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var id = ele[0]._origin.id;
            vm.openLayuiWindow('/datav/list/gd/index.jsp', {gridId: id, ptitle: '12345分析-网格总体情况'});
          }
        });
        chart.render();
      },
      init12345SSgdgllb: function (data) {
        this.a2345SSgdgllb = data;
      },
      initChart12345Lxtj: function (data) {
        var chart = new G2.Chart({
          container: 'chart-12345-lxtj',
          width: 630,
          height: 375,
          padding: [50, 300, 50, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        chart.intervalStack().position('value').color('name').shape('sliceShape');
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'left',
          useHtml: true,
          containerTpl: '<div id="myleft-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        var vm = this;
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var id = ev.data._origin.id;
            vm.openLayuiWindow('/datav/list/gd/index.jsp', {menuid: id, ptitle: '12345分析-类型统计'});
          }
        });
        chart.render();
      },
      initChart12345Sllqs: function (data) {
        var vm = this;
        this.$FU.refineMonth(data, true);
        var chart = new G2.Chart({
          container: 'chart-12345-sllqs',
          width: 880,
          height: 375,
          padding: [40, 30, 70, 70]
        });
        chart.source(data);
        chart.scale('value', { alias: '数量', tickInterval: 40 });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3e4b75'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('value', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#3d4a73'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#3d4a73',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.interval().position('name*value').opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', {
          textStyle: {
            fill: '#c5a014',
            fontSize: 26
          }
        });
        chart.line().position('name*value').style('value', {
          stroke: '#ebe008'
        }).tooltip(false);
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              year: '20' + origin.year,
              month: origin.month,
              ptitle: '12345分析-受理量趋势'
            };
            vm.openLayuiWindow('/datav/list/gd/index.jsp', param);
          }
        });
        chart.render();
      },
      initChart12345Jdxcg: function () {
        var sourceData = window.$FakeDate.Chart12345Jdxcg;
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            求助: n['求助'],
            投诉: n['投诉']
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['求助', '投诉'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-12345-jdxcg',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']);
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initChart12345Myd: function (data) {
        this.chart12345Myd = parseFloat(data.value);
      },
      // 舆情分析方法
      initYqfx: function () {
        this.getAndLoad('月度趋势折线图', 'api/v3/wgh/yuqing/monthStat.jsp', this.initChartYqfxYdqszxt);
        this.getAndLoad('实时舆情工单列表信息', 'api/v3/wgh/yuqing/list.jsp', this.initYqfxSsgdgdlb);
        this.getAndLoad('网格总体情况', 'api/v3/wgh/yuqing/mapStat.jsp', this.initChartYqfxWgztqk);
        this.getAndLoad('来源统计', 'api/v3/wgh/yuqing/sourceStat.jsp', this.initChartYqfxLytj);
      },
      initChartYqfxYdqszxt: function (data) {
        this.$FU.refineMonth(data);
        var sourceData = [];
        data.forEach((n) => {
          sourceData.push(
            {name: '正面舆情', month: n.name, value: n.value.good}
          );
          sourceData.push(
            {name: '负面舆情', month: n.name, value: n.value.bad}
          );
        });
        var chart = new G2.Chart({
          container: 'chart-yqfx-ydqszxt',
          width: 880,
          height: 375,
          forceFit: true,
          padding: [20, 20, 90, 30]
        });
        chart.source(sourceData, {
          month: {
            type: 'cat',
            tickInterval: 50,
            range: [ 0, 1 ]
          }
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('month', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#0e5c9e',
              lineDash: [ 1, 0 ]
            }
          },
          tickLine: false
        });
        chart.axis('value', {
          label: null,
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.legend(false);
        // ['l(90) 0:#18ebe0 1:#0584ef', 'l(90) 0:#5534d4 1:#00ff00']#9877f6   #6ff6fb
        chart.areaStack().position('month*value').shape('smooth').color('name', ['#9877f6', '#6ff6fb']).opacity(0.8);
        chart.lineStack().position('month*value').shape('smooth').color('name', ['#9877f6', '#6ff6fb']).opacity(1).size(1);
        chart.render();
      },
      initYqfxSsgdgdlb: function (data) {
        this.yqfxSSgdgllb = data;
      },
      initChartYqfxWgztqk: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-wqfx-wgztqk',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '舆情', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(35).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              gridId: origin.id,
              ptitle: '舆情信息-网格总体情况'
            };
            vm.openLayuiWindow('/datav/list/yq/index.jsp', param);
          }
        });
        chart.render();
      },
      initChartYqfxLytj: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-yqfx-lytj',
          forceFit: true,
          width: 880,
          height: 420,
          padding: [60, 20, 160, 30]
        });
        chart.source(data);
        chart.legend(false);
        chart.scale('value', { alias: '数量' });
        chart.tooltip({showTitle: false});
        chart.axis('value', {
          label: null,
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#0e5c9e',
            lineDash: [1, 0]
            }
          }
        });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#0e5c9e'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            rotate: -30,
            offset: [-25, 60]
          }
        });
        chart.interval().position('name*value').color('name', G2.Global.colors).label('value', {
          textStyle: {
            fill: '#c5a014',
            fontSize: 26
          }
        });
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              sourceId: origin.id,
              ptitle: '舆情信息来源统计'
            };
            vm.openLayuiWindow('/datav/list/yq/index.jsp', param);
          }
        });
        chart.render();
      },
      // 矛盾分析
      initMdfx () {
        this.getAndLoad('趋势折线图', 'api/v3/wgh/maodun/monthStat.jsp', this.initChartMdfxQszxt);
        this.getAndLoad('矛盾类型占比', 'api/v3/wgh/maodun/typeStat.jsp', this.initChartMdfxFdlxzb);
        this.getAndLoad('网格总体情况', 'api/v3/wgh/maodun/mapStat.jsp', this.initChartMdfxWgztqk);
        this.getAndLoad('激烈程度占比', 'api/v3/wgh/maodun/urgentStat.jsp', this.initChartMdfxJlcdzb);
        this.initChartMdfxXfgzqk();
      },
      initChartMdfxQszxt: function (data) {
        this.$FU.refineMonth(data, true);
        var chart = new G2.Chart({
          container: 'chart-mdfx-qszxt',
          width: 880,
          height: 375,
          padding: [30, 30, 50, 30]
        });
        chart.source(data);
        chart.scale('value', {alias: '事件数'});
        chart.scale('name', {
          range: [0, 1]
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          }
        });
        chart.axis('value', {
          label: null,
          grid: {
            lineStyle: {
            lineWidth: 2,
            stroke: '#20579C',
            lineDash: [16, 3]
            }
          }
        });
        chart.axis('name', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#20579C'
          },
          label: {
            textStyle: {
            fill: '#ffffff',
            fontSize: 24,
            lineHeight: 30,
            textBaseline: 'top'
            },
          autoRotate: false
          }
        });
        chart.line().position('name*value').color("#39A1FE");
        chart.point().position('name*value').size(4).shape('circle').style({
          stroke: '#39A1FE',
          lineWidth: 1
        });
        chart.render();
      },
      initChartMdfxFdlxzb: function (data) {
        var chart = new G2.Chart({
          container: 'chart-mdfx-mdlxzb',
          width: 880,
          height: 375,
          padding: [50, 300, 50, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        chart.intervalStack().position('value').color('name').shape('sliceShape');
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="myleft-legend2" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        var vm = this;
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var typeId = ev.data._origin.id;
            vm.openLayuiWindow('/datav/list/md/index.jsp', {typeId, ptitle: '矛盾分析-矛盾类型占比'});
          }
        });
        chart.render();
      },
      initChartMdfxWgztqk: function (data) {
        var chart = new G2.Chart({
          container: 'chart-mdfx-wgztqk',
          width: 880,
          height: 375,
          padding: [0, 10, 150, 10]
        });
        chart.source(data);
        chart.scale('value', { alias: '矛盾数量', tickInterval: 20 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(30).opacity(1).style('value', {
          fill: 'l(90) 0:#0ea991 1:#2c93ea'
        });
        var vm = this;
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var param = {
              gridId: origin.id,
              ptitle: '矛盾分析-网格总体情况'
            };
            vm.openLayuiWindow('/datav/list/md/index.jsp', param);
          }
        });
        chart.render();
      },
      initChartMdfxJlcdzb: function (data) {
        var chart = new G2.Chart({
          container: 'chart-mdfx-jlcdzb',
          width: 400,
          height: 375,
          padding: [50, 10, 50, 10]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98,
          innerRadius: 0.68
        });
        chart.intervalStack().position('value').color('name', ['#f2637b', '#39a1fd', '#4ecb73']).shape('sliceShape').label('name', {
          textStyle: {
            fill: '#ffffff',
            fontSize: 24
          }
        });
        chart.tooltip(true, {
          showTitle: false
        });
        chart.legend('name', {
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="myright-legend2" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        var vm = this;
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var level = ev.data._origin.name;
            vm.openLayuiWindow('/datav/list/md/index.jsp', {level, ptitle: '矛盾分析-激烈程度占比'});
          }
        });
        chart.render();
      },
      initChartMdfxXfgzqk: function () {
        var sourceData = window.$FakeDate.ChartMdfxXfgzqk;
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            集访: n['集访'],
            个访: n['个访']
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['集访', '个访'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-mdfx-xfgzqk',
          width: 480,
          height: 375,
          padding: [60, 30, 70, 50]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend _35"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']);
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      // 263分析
      init263fx: function () {
        // this.initChart263zxzbwgtjqk();
        this.getAndLoad('自查自曝网格统计', 'api/v3/wgh/263/mapStat.jsp', this.initChart263Wgfx);
        this.getAndLoad('自查自曝网格统计情况', 'api/v3/wgh/263/zczbStat.jsp', this.initChart263zxzbwgtjqk);
        this.getAndLoad('自查自曝分类统计', 'api/v3/wgh/263/typeStat.jsp', this.initChart263zxzbfltj);
        this.getAndLoad('散乱污排查点两端三清', 'api/v3/wgh/263/ldsqStat.jsp', this.initChart265slpwldsq);
        this.getAndLoad('散乱排污整改情况', 'api/v3/wgh/263/zgqdStat.jsp', this.initChart263slpwzg);
      },
      initChart263Wgfx: function (sourceData) {
        var data = [
          {
            name: '自查自报'
          },
          {
            name: '散乱污排查'
          }
        ];
        sourceData.forEach(function (n) {
          data[0][n.name] = n.zczb;
          data[1][n.name] = n.slw;
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        var village = sourceData.map(n => n.name);
        dv.transform({
          type: 'fold',
          fields: village, // 展开字段集
          key: '村庄', // key字段
          value: '数量' // value字段
        });
        var chart = new G2.Chart({
          container: 'chart-263fx-wgfx',
          width: 880,
          height: 375,
          padding: [50, 10, 150, 10]
        });

        chart.axis('数量', {
          label: null,
          grid: {
            lineStyle: {
              lineWidth: 1,
              stroke: '#0e5c9e',
              lineDash: [1, 0]
            }
          }
        });
        chart.axis('村庄', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.legend({
          useHtml: true,
          position: 'top', // 设置图例的显示位置
          itemGap: 10, // 图例项之间的间距
          containerTpl: '<div id="wgfx-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });

        chart.source(dv);
        chart.intervalStack().position('村庄*数量').color('name', ['#58CFF1', '#0358E7']);
        var vm = this;
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var sourceItem = sourceData.find((n) => origin.村庄 == n.name);
            var param = {
              gridId: sourceItem.id,
              ptitle: '263分析-网格分析'
            };
            vm.openLayuiWindow('/datav/list/263/index.jsp', param);
          }
        });
        chart.render();
      },
      initChart263zxzbwgtjqk: function (sourceData) {
        var data = [
          {name: '治理垃圾'},
          {name: '治理黑臭水体'},
          {name: '治理畜禽养殖污染'},
          {name: '治理挥发性有机物污染'},
          {name: '治理环境隐患'},
          {name: '治散乱污企业'}
        ];
        var types = data.map(n => n.name);
        sourceData.forEach(function (n) {
          types.forEach(function (t, i) {
            data[i][n.name] = n.value[t];
          });
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        var village = sourceData.map(n => n.name);
        dv.transform({
          type: 'fold',
          fields: village, // 展开字段集
          key: '村庄', // key字段
          value: '个数' // value字段
        });
        var chart = new G2.Chart({
          container: 'chart-263fx-zczbwgtjqk',
          width: 880,
          height: 375,
          padding: [50, 10, 150, 10]
        });

        chart.axis('个数', {
          label: null,
          grid: null
        });
        chart.axis('村庄', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false,
            formatter: function (v) {
              return v.split('').join('\n');
            }
          },
          tickLine: false
        });
        chart.legend({
          useHtml: true,
          position: 'top', // 设置图例的显示位置
          itemGap: 10, // 图例项之间的间距
          containerTpl: '<div id="zbzc-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.source(dv);
        chart.intervalStack().position('村庄*个数').color('name', ['#31339A', '#0081FF', '#209166', '#FFFF00', '#F7961C', '#C71683']);
        var vm = this;
        chart.on('plotclick', ev => {
          var ele = chart.getSnapRecords(ev);
          if (ele && ele[0]) {
            var origin = ele[0]._origin;
            var sourceItem = sourceData.find((n) => origin.村庄 == n.name);
            var param = {
              gridId: sourceItem.id,
              ptitle: '263分析-自查自曝网格统计情况'
            };
            vm.openLayuiWindow('/datav/list/263/zczbIndex.jsp', param);
          }
        });
        chart.render();
      },
      initChart263slpwzg: function (data) {
        var chart = new G2.Chart({
          container: 'chart-263fx-slpwzgqk',
          width: 500,
          height: 375,
          padding: [0, 0, 0, 0]
        });
        chart.source(data);
        chart.legend(false);
        chart.tooltip({
          showTitle: null
        });
        chart.facet('rect', {
          fields: ['name'],
          padding: 0,
          showTitle: false,
          eachView: function eachView (view, facet) {
            var data = facet.data;
            var color = void 0;
            if (data[0].name === '整改') {
              color = '#CED542';
            } else {
              color = '#EC9321';
            }
            data.push({
              name: '未操作',
              value: 100 - data[0].value
            });
            view.source(data);
            view.coord('theta', {
              radius: 0.8,
              innerRadius: 0.8
            });
            view.intervalStack().position('value').color('name', [color, '#eceef1']).opacity(1);
            view.guide().html({
              position: ['50%', '50%'],
              html: `<div id="slpw-guide" class="g2-guide-html" style="cursor:pointer;" onclick="
                $wgh.openLayuiWindow('/datav/list/263/slwIndex.jsp', {type: '${data[0].name == '整改' ? 'zhenggai' : 'qudi'}', ptitle: '263分析-散乱污整改'})">
                <p class="title">${data[0].name}</p><p class="value">${data[0].value}</p></div>`
            });
          }
        });
        chart.tooltip(false);
        chart.render();
      },
      initChart265slpwldsq: function (data) {
        var vm = this;
        var chart = new G2.Chart({
          container: 'chart-263fx-slwpcdldsq',
          width: 500,
          height: 375,
          padding: [0, 0, 0, -100]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.8
        });
        chart.legend({
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="myright-legend" class="g2-legend fx263"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.axis(false);
        chart.intervalStack().position('value').color('name', ['#FDC57E', '#F77CA5', '#7AF5F9', '#BB87B9', '#28BFCF']).shape('flowerShape').style({
          flowerShape: {
            max: vm.$FU._.maxBy(data, 'value').value
          }
        });
        chart.tooltip({
          showTitle: false
        });
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var name = ev.data._origin.name;
            var sx = {
              '断水': 'duanshui',
              '断电': 'duandian',
              '清原料': 'qingyuanliao',
              '清产品': 'qingchanpin',
              '清设备': 'qingshebei'
            }[name];
            vm.openLayuiWindow('/datav/list/263/slwIndex.jsp', {sx, ptitle: '263分析-散乱污排查点两段三清'});
          }
        });
        chart.render();
      },
      initChart263zxzbfltj: function (data) {
        data.sort((n, n2) => n.value - n2.value);
        var chart = new G2.Chart({
          container: 'chart-263fx-zczbfltj',
          width: 500,
          height: 375,
          padding: [10, 0, 0, 0]
        });
        chart.source(data);
        chart.coord('theta', {
          innerRadius: 0.2,
          endAngle: Math.PI
        });
        chart.interval().position('name*value').color('name', ['#56E3B1', '#F36C7C', '#FBCF5A', '#FFFF9B', '#00A2B9', '#E132F3']).shape('interval').select(false).style({
          lineAppendWidth: 10
        }); // 线状柱状图
        for (var i = 0, l = data.length; i < l; i++) {
          var obj = data[i];
          chart.guide().text({
            position: [obj.name, 0],
            content: obj.name + ' ',
            style: {
              textAlign: 'right',
              fontSize: 20,
              fill: '#ffffff'
            }
          });
        }
        var vm = this;
        chart.on('interval:click', ev => {
          if (ev && ev.data) {
            var type = ev.data._origin.id;
            vm.openLayuiWindow('/datav/list/263/zczbIndex.jsp', {type, ptitle: '263分析-自查自曝网格统计情况'});
          }
        });
        chart.render();
      },
      // 经济运行分析
      initJjyxfx: function () {
        var vm = this;
        var newGirdNo = this.currentGirdNo;
        this.getAndLoad2('全镇主要经济指标', 'api/v3/jjyxfx/cTj/getInfo.jsp', this.initJjyxGckpxs);
        this.getAndLoad2('入库税金占比', 'api/v3/jjyxfx/zcrksj/getInfo.jsp', this.initJjyxRksjzb);
        this.getAndLoad2('企业效能前10排行', 'api/v3/jjyxfx/qysjph/getInfo.jsp', this.initJjyxQyxnph);
        if (this.wgTree.length == 2) {
          this.getAndLoad2('村级主要经济指标', `api/v3/jjyxfx/cTj/getInfo.jsp?id=${newGirdNo}`, this.initJjyxGckpxs);
          this.getAndLoad2('各村霞客经济效益图', `api/v3/jjyxfx/hgsjfx/getInfo.jsp?id=${newGirdNo}`, this.initJjyxQzqnmjqsfxGc);
        }
        this.getAndLoad2('霞客经济效益图', 'api/v3/jjyxfx/hgsjfx/getInfo.jsp', this.initJjyxQzqnmjqsfx);
        // this.getAndLoad2('各网格亩均产值', 'api/v3/jjyxfx/mjph/getInfo.jsp', this.initJjyyWgmjcz);
        this.getAndLoad2('网格经济数据', 'api/v3/jjyxfx/qyInfo/getInfo.jsp', (data) => {
          vm.gridJjData = data;
        });
      },
      initJjyxGckpxs: function (sourceData) {
        document.getElementById('chart-jjyx-gckpxsx-cj').innerHTML = '';
        var vm = this;
        var fields = Object.keys(sourceData);
        var data = [];
        var length = sourceData[fields[0]].length;
        for (let i = 1; i <= length; i++) {
          let o = { month: i + '月' };
          fields.forEach((f) => {
            o[f] = sourceData[f][i - 1].value;
          });
          data.push(o);
        }
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: fields,
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-jjyx-gckpxsx' + (vm.wgTree.length > 1 ? '-cj' : ''),
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          month: {
            range: [0, 1]
          }
        });
        chart.axis('month', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.guide().html({
          top: true,
          offsetX: vm.wgTree.length > 1 ? -240 : -390,
          offsetY: -270,
          position: [1, 0],
          html: `<div style="color: white;font-size: 22px;">单位/亿元</div>`,
          zIndex: 0
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('month*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).shape('smooth');
        chart.point().position('month*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      /*
      initJjyxRksjzb: function (sourceData) {
        var data = sourceData.map((n) => {
          var item = {
            name: n.name,
            value: parseInt(n.value[0]),
            other: parseInt(n.value[1])
          };
          item.percent = ((item.value * 100) / (item.value + item.other)).toFixed(2);
          return item;
        });

        var chart = new G2.Chart({
          container: 'chart-jjyx-rksjzb',
          width: 880,
          height: 375,
          padding: [-30, 0, 0, 0]
        });
        chart.source(data);
        chart.legend(false);
        chart.tooltip({
          showTitle: null
        });
        chart.facet('rect', {
          fields: ['name'],
          padding: 0,
          showTitle: false,
          eachView: function eachView (view, facet) {
            var data = facet.data;
            var color = void 0;
            if (data[0].name === '工业') {
              color = '#eae039';
            } else if (data[0].name === '农业') {
              color = '#11de99';
            } else {
              color = '#f0656d';
            }
            data.push({
              name: '其他',
              value: data[0].other
            });
            view.source(data);
            view.coord('theta', {
              radius: 0.75,
              innerRadius: 0.65
            });
            view.intervalStack().position('value').color('name', [color, '#15c4cf']).opacity(1);
            view.guide().html({
              position: ['49%', '51%'],
              html: '<div id="slpw2-guide" class="g2-guide-html"><p class="value">' + data[0].percent + '%</p><p class="title">' + data[0].name + '</p></div>'
            });
          }
        });
        chart.render();
      },
      */
      initJjyxRksjzb: function (data) {
        document.getElementById('chart-jjyx-rksjzb').innerHTML = '';
        document.getElementById('chart-jjyx-kpxszb').innerHTML = '';
        document.getElementById('chart-jjyx-qshyzb').innerHTML = '';
        this.initJjyxRksjzb_1(data.入库税金);
        this.initJjyxRksjzb_2(data.开票销售);
        this.initJjyxRksjzb_3(data.前10行业占比);
      },
      initJjyxRksjzb_1: function (data) {
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-rksjzb',
          width: 240,
          height: 375,
          padding: [50, 20, 50, 20]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.6,
          innerRadius: 0
        });
        chart.tooltip(true, {
          showTitle: false
        });
        chart.intervalStack().position('value').color('name', ['#f2637b', '#39a1fd', '#4ecb73']).shape('sliceShape').label('name', {
          textStyle: {
            fill: '#ffffff',
            fontSize: 24
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.legend(false);
        chart.render();
      },
      initJjyxRksjzb_2: function (data) {
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-kpxszb',
          width: 240,
          height: 375,
          padding: [50, 20, 50, 20]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.6,
          innerRadius: 0
        });
        chart.tooltip(true, {showTitle: false});
        chart.intervalStack().position('value').color('name', ['#f2637b', '#39a1fd', '#4ecb73']).shape('sliceShape').label('name', {
          textStyle: {
            fill: '#ffffff',
            fontSize: 20
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.legend(false);
        chart.render();
      },
      initJjyxRksjzb_3: function (data) {
        var vm = this;
        this.$FU.calcPercent(data);
        var chart = new G2.Chart({
          container: 'chart-jjyx-qshyzb',
          width: 400,
          height: 375,
          padding: [50, 0, 50, -200]
        });
        chart.source(data);
        chart.coord('theta', {
          radius: 0.98
        });
        chart.legend({
          position: 'right',
          useHtml: true,
          containerTpl: '<div id="myright-legend" class="g2-legend fxjjyx"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        // chart.legend(false);
        chart.axis(false);
        chart.tooltip(true, {showTitle: false});
        chart.intervalStack().position('value').color('name', G2.LW_CONSTANCE.COLOR_PIE).shape('flowerShape').style({
          flowerShape: {
            max: vm.$FU._.maxBy(data, 'value').value
          }
        }).tooltip('name*value*percent', (name, value, percent) => {
          return {
            name: name,
            value: `${value} (${percent})`
          };
        });
        chart.render();
      },
      initJjyxQyxnph: function (data) {
        // eslint-disable-next-line
        this.jjyxQyxnph = data;
      },
      initJjyxQzqnmjqsfx: function (sourceData) {
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            财政收入: n['财政收入(亿元)'],
            地区生产总值: n['地区生产总值(亿元)'],
            开票销售收入: n['开票销售收入(亿元)'],
            工业总产值: n['工业总产值 (万元)'] / 10000,
            '进出口总额(美元)': n['进出口总额(亿美元)']
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['财政收入', '地区生产总值', '开票销售收入', '工业总产值', '进出口总额(美元)'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-jjyx-qzqnmjqsfx',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        // chart.scale('value', { alias: '数值', tickInterval: 40 });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        chart.guide().html({
          top: true,
          offsetX: 50,
          offsetY: -80,
          position: [1, 0],
          html: `<div style="color: white;font-size: 22px;">产值/亿元</div>`,
          zIndex: 0
        });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).shape('smooth');
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initJjyxQzqnmjqsfxGc: function (sourceData) {
        document.getElementById('chart-jjyx-qzqnmjqsfx-gc').innerHTML = '';
        var data = sourceData.map((n) => {
          return {
            year: n.year,
            开票销售: parseInt(n['开票销售']),
            入库税金: parseInt(n['入库税金']),
            有效收入: parseInt(n['有效收入'])
          };
        });
        var ds = new DataSet();
        var dv = ds.createView().source(data);
        dv.transform({
          type: 'fold',
          fields: ['开票销售', '入库税金', '有效收入'],
          key: 'type',
          value: 'chanzhi'
        });
        var chart = new G2.Chart({
          container: 'chart-jjyx-qzqnmjqsfx-gc',
          width: 880,
          height: 375,
          padding: [60, 30, 70, 90]
        });
        chart.source(dv, {
          year: {
            range: [0, 1]
          }
        });
        // chart.scale('value', { alias: '数值', tickInterval: 40 });
        chart.axis('year', {
          axes: false,
          line: {
            lineWidth: 2,
            stroke: '#59ceec'
          },
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'top'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('chanzhi', {
          axes: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 20,
              lineHeight: 30,
              textBaseline: 'top'
            }
          },
          grid: {
            lineStyle: {
              lineWidth: 2,
              stroke: '#59ceec',
              lineDash: [ 2, 0 ]
            }
          },
          tickLine: false
        });
        // chart.guide().html({
        //   top: true,
        //   offsetX: 50,
        //   offsetY: -80,
        //   position: [1, 0],
        //   html: `<div style="color: white;font-size: 22px;">产值/亿元</div>`,
        //   zIndex: 0
        // });
        chart.legend('type', {
          position: 'top',
          useHtml: true,
          containerTpl: '<div id="jjxy-legend" class="g2-legend"><table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table></div>'
        });
        chart.line().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).shape('smooth');
        chart.point().position('year*chanzhi').color('type', ['#56E3B1', '#F36C7C', '#FBCF5A', '#725ecf', '#00A2B9', '#E132F3']).size(4).shape('circle').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      },
      initJjyyWgmjcz: function (data) {
        this.$refs.chartJjyyWgmjcz.innerHTML = '';
        data.sort((n1, n2) => n1.value - n2.value);
        var chart = new G2.Chart({
          container: 'chartJjyyWgmjcz',
          width: 540,
          height: 850,
          padding: [20, 100, 50, 150]
        });
        chart.source(data);
        chart.scale('value', { alias: '产值', tickInterval: 30 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'middle'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(24).opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 26
          }
        });
        chart.coord().transpose();
        chart.render();
        this.jjyyWgmjczData = data;
        this.drawWgmjczChartOnMap();
      },
      drawWgmjczChartOnMap () {
        var vm = this;
        vm.map.removeObjByTypename('Histogram');
        if (!vm.jjyyWgmjczData) {
          return;
        }
        // 在地图上绘制柱状图
        vm.jjyyWgmjczData.forEach((n) => {
          setTimeout(() => {
            vm.map.drawHistogram(n.cp, n.value, n.value * 8, 1600, '#acc256');
          }, 2000 * Math.random());
        });
        vm.handleMapOptions(-1);
        vm.handeleWgTreeClick('', 0);
        vm.map.setRotationAndPitch(-67.94, 65.58);
      },
      initJjyyWgmjczV2: function (data) {
        this.$refs.chartJjyyWgmjcz.innerHTML = '';
        var chart = new G2.Chart({
          container: 'chartJjyyWgmjcz',
          width: 540,
          height: 850,
          padding: [20, 100, 50, 150]
        });
        chart.source(data);
        chart.scale('value', { alias: '产值', tickInterval: 30 });
        chart.axis('name', {
          axes: false,
          line: false,
          label: {
            textStyle: {
              fill: '#ffffff',
              fontSize: 24,
              lineHeight: 30,
              textBaseline: 'middle'
            },
            autoRotate: false
          },
          tickLine: false
        });
        chart.axis('value', false);
        chart.interval().position('name*value').size(24).opacity(1).style('value', {
          fill: 'l(90) 0:#18ebe0 1:#0584ef'
        }).label('value', {
          textStyle: {
            fill: '#fff',
            fontSize: 26
          }
        });
        chart.coord().transpose();
        chart.render();
        this.jjyyWgmjczData = data;
        this.drawWgmjczChartOnMapV2();
      },
      drawWgmjczChartOnMapV2 () {
        var vm = this;
        vm.map.removeObjByTypename('Histogram');
        if (!vm.jjyyWgmjczData) {
          return;
        }
        // 在地图上绘制柱状图
        vm.jjyyWgmjczData.forEach((n) => {
          vm.map.drawHistogram(n.cp, n.value, n.value * 10, 1000, '#da9935');
        });
      },
      // 地图相关
      initMap: function () {
        var vm = this;
        document.getElementById('wghMap').innerHTML = '';
        var map = new LwMap('wghMap', [120.315257, 31.774255], [13.45, 3, 20], {
          pitch: 30.7333,
          rotation: -76.9348,
          viewMode: '3D'
        });

        vm.map = map;
        map.loadPromise.then(() => {
          boundaryData.features.forEach((feature, index) => {
            // 显示一级网格 （所有村 显示范围 3-14.5）
            map.add3DBoundaryByFeatureV2(feature, index, 0.5, 1500, [3, 14.99], function () {
              map.setCenterAndZoom(feature.properties.cp, 15);
              // 清除其他所有二级网格
              map.removeFeature('Feature');
              vm.currentGirdNo = feature.id;
              // 更新面包线
              var wgTree = vm.wgTree.slice(0, 1);
              wgTree.push({
                name: feature.properties.name,
                type: 'Feature',
                id: feature.id,
                cp: feature.properties.cp
              });
              vm.wgTree = wgTree;
              // 显示二级网格 （村里面的网格 临时网格）
              feature.features.forEach(vm.addFeatureV2);
            }, '', () => {
              if (vm.wglms[1].active) {
                var name = feature.properties.name;
                if (vm.gridJjData && vm.gridJjData[name]) {
                  var popoverHtml = `<div class="common-detail key200">${this.$FU.obj2HtmlDom(vm.gridJjData[name])}</div>`;
                  vm.map.showInfoWindow(popoverHtml, feature.properties.cp, 'bottom-center jjpover');
                }
              } else if (vm.wglms[0].active) {
                vm.getAndLoad('网格一长五圆联系方式', 'api/v3/wgh/getYzwyInfo.jsp?gridId=' + feature.id, (data) => {
                  var html = '<div class="yzwy-detail">';
                  html += '<table> <tr><th>职务</th><th>姓名</th><th>联系方式</th></tr>';
                  var keys = Object.keys(data);
                  keys.forEach((post) => {
                    let list = data[post];
                    if (!list) { return; }
                    list.forEach((o, i) => {
                    html += `<tr>
                      ${i ? '' : `<td rowspan="${list.length}">${post}</td>`}
                      <td>${o.name}</td>
                      <td class="count">${o.value}</td>
                      </tr>`;
                    });
                  });
                  html += '</table></div>';
                  vm.map.showInfoWindow(html, feature.properties.cp, 'bottom-center');
                });
              }
            });
          });
          if (process.env.NODE_ENV == "production") {
            vm.map.addBoundLight(boundaryData);
          }
          // vm.map.addBoundLight(boundaryData);

          vm.rotationAndPitch = vm.map.getRotationAndPitch();

          var script = document.createElement('script');
          script.innerHTML =
            `
            function openFrame (src) {
              window.layer.open({
                closeBtn: true,
                type: 2,
                title: false,
                  shadeClose: false,
                  shade: 0,
                  skin: 'layerSkin',
                  area: ['50%', '920px'],
                  content: [src, 'no']
                }
              );
            }`;
          vm.$refs.wghmap.append(script);
          // ///////////////////////////////
          vm.map.addMarker('center', '/static/imgs/map/center.gif', [120.343274, 31.777696], [96, 96], [48, 96], '', '', '', 90);
        });
        return map.loadPromise;
      },
      addFeatureV2: function (fl2, index) {
        var vm = this;
        var map = vm.map;
        // map.add3DBoundaryByFeatureV2(fl2, index * 5, 0.5, 1000, [15, 15.99]);
        map.add3DBoundaryByFeatureV2(fl2, index * 5, 0.5, 1000, [15, 15.99], function () {
          map.setCenterAndZoom(fl2.properties.cp, 16);
          map.removeFeature('Terminal');
          vm.currentGirdNo = fl2.id;
          var wgTree = vm.wgTree.slice(0, 2);
          wgTree.push({
            name: fl2.properties.name,
            type: 'Terminal',
            id: fl2.id,
            cp: fl2.properties.cp
          });
          vm.wgTree = wgTree;
          map.add3DBoundaryByFeatureV2(fl2, '#1ac9ff', 0.3, 600, [16, 20], null, 'Terminal'); // 增加顶级网格 type="termial"
        }, '', () => {
          if (vm.wglms[1].active) {
            // TODO
          } else if (vm.wglms[0].active) {
            vm.getAndLoad('网格一长五圆联系方式', 'api/v3/wgh/getYzwyInfo.jsp?gridId=' + fl2.id, (data) => {
              var html = '<div class="yzwy-detail">';
              html += '<table> <tr><th>职务</th><th>姓名</th><th>联系方式</th></tr>';
              var keys = Object.keys(data);
              keys.forEach((post) => {
                let list = data[post];
                if (!list) { return; }
                list.forEach((o, i) => {
                html += `<tr>
                  ${i ? '' : `<td rowspan="${list.length}">${post}</td>`}
                  <td>${o.name}</td>
                  <td class="count">${o.value}</td>
                  </tr>`;
                });
              });
              html += '</table></div>';
              vm.map.showInfoWindow(html, fl2.properties.cp, 'bottom-center');
            });
          }
        });
      }
    },
    mounted: function () {
      var vm = this;
      global.$wgh = this;
      vm[vm.wglms[0].foo]();
      vm.wglms[0].inited = true;
      vm.getAndLoad('霞客镇网格数据', 'api/v3/wgh/getStat.jsp?gridId=' + vm.currentGirdNo, vm.initGridInfo);
      vm.initMap().then(() => {
        vm.getAndLoad('标注点信息', 'api/v3/wgh/getAllElement.jsp?gridId=' + vm.currentGirdNo, vm.initActivityInfo);
      });
      layui.use(['layer'], function () {
        window.layer = layui.layer;
      });
    },
    watch: {
      currentGirdNo: function (newGirdNo) {
        if (this.wglms[1].active) {
          if (this.wgTree.length == 2) {
            this.getAndLoad2('村级主要经济指标', `api/v3/jjyxfx/cTj/getInfo.jsp?id=${newGirdNo}`, this.initJjyxGckpxs);
            this.getAndLoad2('各村霞客经济效益图', `api/v3/jjyxfx/hgsjfx/getInfo.jsp?id=${newGirdNo}`, this.initJjyxQzqnmjqsfxGc);
          }
          if (this.wgTree.length < 3) {
            this.getAndLoad2('入库税金占比', `api/v3/jjyxfx/zcrksj/getInfo.jsp?id=${newGirdNo}`, this.initJjyxRksjzb);
            this.getAndLoad2('企业效能前10排行', `api/v3/jjyxfx/qysjph/getInfo.jsp?id=${newGirdNo}`, this.initJjyxQyxnph);
          }
          this.activityLoading = true;
          this.getAndLoad('标注点信息', 'api/v3/wgh/getAllElement.jsp?gridId=' + newGirdNo, this.initActivityInfo);
        } else {
          this.activityLoading = true;
          this.getAndLoad('标注点信息', 'api/v3/wgh/getAllElement.jsp?gridId=' + newGirdNo, this.initActivityInfo);
        }
        this.getAndLoad('霞客镇网格数据', 'api/v3/wgh/getStat.jsp?gridId=' + newGirdNo, this.initGridInfo);
      }
    }
  };
</script>

<style lang="scss">
#wghMap {
  position: absolute;
  width: 3840px;
  height: 1080px;
  .bottom-center {
    &.yymtest {
      .amap-info-outer {
        width: 490px;
        height: 600px;
      }
    }
    &.amap-info-contentContainer {
      padding-bottom: 50px;
      padding-left: 150px;
      &::before {
        content: "";
        display: block;
        border-width: 23px;
        position: absolute;
        bottom: 8px;
        left: 300px;
        border-style: solid dashed dashed;
        border-color: #05dfec transparent transparent;
        font-size: 0;
        line-height: 0;
      }
      &::after {
        content: "";
        display: block;
        border-width: 20px;
        position: absolute;
        left: 303px;
        border-style: solid dashed dashed;
        bottom: 15px;
        border-color: #0d2847 transparent transparent;
        font-size: 0;
        line-height: 0;
      }
    }
    &.jjpover {
      .amap-info-outer {
        width: 340px;
        height: 260px;
      }
    }
    &.jjpover.amap-info-contentContainer {
        padding-bottom: 70px;
        padding-left: 150px;
        &::before {
          content: "";
          display: block;
          border-width: 23px;
          position: absolute;
          bottom: 28px;
          left: 240px;
          border-style: solid dashed dashed;
          border-color: #05dfec transparent transparent;
          font-size: 0;
          line-height: 0;
        }
        &::after {
          content: "";
          display: block;
          border-width: 20px;
          position: absolute;
          left: 243px;
          border-style: solid dashed dashed;
          bottom: 35px;
          border-color: #0d2847 transparent transparent;
          font-size: 0;
          line-height: 0;
        }
    }
    .amap-info-sharp {
      display: none;
      // margin-bottom: 22px;
      // border-top: 18px solid #ecec31;
    }
  }
  .amap-info-outer {
    background: #0d2847;
    width: 470px;
    height: 350px;
    padding: 10px;
    border: 4px solid #05dfec;
    .amap-info-close {
      font-size: 34px;
      color: #00abff;
      top: 15px;
      right: 20px !important;
    }
    &::-webkit-scrollbar{
      width:6px;
      height:3px;
    }
    &::-webkit-scrollbar-button,::-webkit-scrollbar-track{
      display:none;
    }
    &::-webkit-scrollbar-track-piece{
      background: #11212b;
    }
    &::-webkit-scrollbar-thumb{
      background: #00ffdd52;
      border-radius:10px;
    }
  }
}
.g2-tooltip {
  font-size: 22px !important;
  padding: 20px !important;
  background: #948dccc9 !important;
  color: white !important;
  .g2-tooltip-list {
    li {
      height: 30px !important;
      line-height: 30px !important;
      display: flex;
      align-items: center;
      .g2-tooltip-marker {
        width: 12px !important;
        height: 12px !important;
      }
    }
  }
}
#myleft-legend {
  font-size: 24px !important;
  color: white !important;
  left: 320px !important;
  top: 25px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: flex;
    flex-wrap: wrap;
    width: 290px;
    height: 300px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#myleft-legend2 {
  font-size: 24px !important;
  color: white !important;
  left: 480px !important;
  top: 0px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    height: 450px;
    .g2-legend-list-item {
      line-height: 40px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#myright-legend {
  font-size: 24px !important;
  color: white !important;
  top: 10px !important;
  overflow: hidden !important;
  max-width: unset !important;
  left: 400px !important;
  top: 40px !important;
  &.fx263 {
    left: 445px !important;
    top: 30px !important;
  }
  &.fxjjyx {
    left: 255px !important;
    top: 0 !important;
    .g2-legend-list {
      width: 200px;
      font-size: 18px;
      .g2-legend-list-item {
        line-height: 25px;
        width: unset;
      }
    }
  }
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 350px;
    height: 300px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#mybottom-legend {
  font-size: 22px !important;
  color: white !important;
  top: 10px !important;
  overflow: hidden !important;
  max-width: unset !important;
  left: 80px !important;
  top: 270px !important;
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 350px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 32px;
      margin-right: 0 !important;
      width: 100%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#myright-legend2 {
  font-size: 24px !important;
  color: white !important;
  top: 80px !important;
  left: 360px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 100px;
    height: 300px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#wgfx-legend {
  font-size: 24px !important;
  color: white !important;
  top: -20px !important;
  left: 570px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 300px;
    height: 50px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#jjxy-legend {
  font-size: 24px !important;
  color: white !important;
  top: -5px !important;
  left: 125px !important;
  overflow: hidden !important;
  max-width: unset !important;
  &._35 {
    left: -35px !important;
  }
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 800px;
    height: 50px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 25px;
      margin-right: 18px !important;
      font-size: 19px;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#kpxs-legend {
  font-size: 24px !important;
  color: white !important;
  top: -20px !important;
  left: 570px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 400px;
    height: 50px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 30%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#rkfx-legend {
  font-size: 24px !important;
  color: white !important;
  top: -20px !important;
  left: 600px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    display: left;
    flex-wrap: wrap;
    width: 150px;
    height: 50px;
    overflow: hidden;
    .g2-legend-list-item {
      line-height: 55px;
      margin-right: 0 !important;
      width: 50%;
      text-align: left;
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#zbzc-legend {
  font-size: 21px !important;
  color: white !important;
  top: -5px !important;
  left: -18px !important;
  overflow: hidden !important;
  max-width: unset !important;
  .g2-legend-list {
    width: 830px;
    height: 50px;
    overflow: hidden;
    .g2-legend-list-item {
      .g2-legend-marker {
        width: 16px !important;
        height: 16px !important;
        border-radius: 0 !important;
      }
      .g2-legend-text {
        color: white;
        margin-left: 5px;
      }
    }
  }
}
#slpw-guide {
    &.g2-guide-html {
        width: 60px;
        height: 50px;
        vertical-align: middle;
        text-align: center;
      .title{
        font-size: 25px;
        color: #ffffff;
        font-weight: 300;
      }
      .value{
        font-size: 25px;
        color: #ffffff;
        font-weight: bold;
      }
    }

}
#slpw2-guide {
  &.g2-guide-html {
    width: 60px;
    height: 50px;
    vertical-align: middle;
    text-align: center;
    .title{
      font-size: 25px;
      color: #ffffff;
      font-weight: 300;
      margin-top: 100px;
    }
    .value{
      line-height: 55px;
      font-size: 30px;
      color: #ffffff;
      font-weight: bold;
    }
  }
}
#chart-jjyx-qzqnmjqsfx {
  .g-guide {
    top: 18px !important;
    left: 0 !important;
  }
}
#chart-wghfx-sxfltj {
  canvas {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  .extra {
    position: absolute;
    width: 350px;
    height: 350px;
    background: white;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    top: 10px;
    left: -5px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      color: #53c5d2;
    }
  }
  .g-guide {
    margin-left: -100px;
    cursor:pointer;
    .libar-extra {
      color: white;
      width: 320px;
      text-indent: 150px;
      height: 35px;
      line-height: 35px;
      font-size: 20px;
      position: relative;
      .liba {
        font-size: 38px;
        position: absolute;
        right: -20px;
        z-index: -1;
        top: 0px;
        font-family: cursive;
      }
    }
  }
}
.el-loading-mask {
  background-color: rgba(255,255,255,.1);
}
.l7-bottom,.l7-top{
  display: none;
}
#chart-263fx-slpwzgqk .slpw-title {
  position: absolute;
  color: white;
  display: flex;
  justify-content: space-around;
  width: 100%;
  font-size: 25px;
  top: 35px;
}
#chart-rkfx-jy{
  .guide_1 {
    color: white;
    font-size: 22px;
    position: absolute;
    width: 80px;
    left: 8px;
    top: 48px;
  }
  .guide_2 {
    color: white;
    font-size: 22px;
    position: absolute;
    width: 80px;
    left: 18px;
    top: -16px;
  }
}
</style>
